过去几周我一直在尝试使用 Redux 来学习 React。我似乎无法正确地将操作作为属性传递,因为当我运行它时,我收到“无法读取 null 的属性“props””。但是在网上找到一些代码,我能够使用 es5 语法尝试它并且它有效.有谁明白我在 es6 中做错了什么以及如何让它工作?下面是我在 es6 上的尝试,它不适用于注释掉的 es5 样式,但它可以工作。
import React, { Component, PropTypes } from 'react'
export default class InputFoo extends Component {
//export default React.createClass({
submitHandler(evt){
evt.preventDefault()
const { inputFooAction } = this.props
inputFooAction(evt.target[0].value);
}
//,
render() {
const { input } = this.props
return (<div>
<h1>Oh hey from inside the component {input}</h1>
<form onSubmit={this.submitHandler}>
<input type="text" id="theInput"/>
</form>
</div>)
}
}// )
//block below is commented out for es5
InputFoo.propTypes = {
inputFooAction: PropTypes.func,
input: PropTypes.string
}
最佳答案
我在这里为您准备了一个演示:http://codepen.io/PiotrBerebecki/pen/dpRdKP
没有自动绑定(bind) ES6 类,因此您的 onSubmit
事件需要按如下方式处理:
<form onSubmit={this.submitHandler.bind(this)}>
或者更好:
constructor() {
super();
this.submitHandler = this.submitHandler.bind(this)
}
// then you can
<form onSubmit={this.submitHandler}>
以下是完整代码,演示了将数据从子组件 (InputFoo
) 中的输入字段传递到父组件 (App
):
class App extends React.Component {
constructor() {
super();
this.handleData = this.handleData.bind(this);
this.state = {
fromChild: ''
};
}
handleData(data) {
this.setState({
fromChild: data
});
}
render() {
return (
<div>
<InputFoo handlerFromParant={this.handleData} />
<h5>Received by parent:<br />{this.state.fromChild}</h5>
</div>
);
}
}
class InputFoo extends React.Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.submitHandler = this.submitHandler.bind(this);
this.state = {
inputField: ''
};
}
submitHandler(evt) {
evt.preventDefault();
// pass the input field value to the event handler passed
// as a prop by the parent (App)
this.props.handlerFromParant(this.state.inputField);
this.setState({
inputField: ''
});
}
handleChange(event) {
this.setState({
inputField: event.target.value
});
}
render() {
return (
<div>
<form onSubmit={this.submitHandler}>
<input type="text"
id="theInput"
value={this.state.inputField}
onChange={this.handleChange} />
<input type="submit" />
</form>
<h5>Visible in child:<br />{this.state.inputField}</h5>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
关于javascript - React es5 与 es6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39748517/