[英]React es5 vs es6
在過去的兩周里,我一直在嘗試通過Redux學習React。 我似乎無法正確地將動作作為屬性傳遞,因為當我運行它時,我得到的是“無法讀取null的屬性”屬性。但是在網上找到了一些代碼后,我可以使用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
沒有自動綁定的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')
);
您忘記了this
組件綁定到事件處理程序。 使用ES6有3種方法:
//most effient way
constructor(props){
super(props);
this.submitHandler = this.submitHandler.bind(this);
}
OR
submitHandler = (e) => {....}
OR
render(){
...
<form onSubmit={this.submitHandler.bind(this)}>
...
}
當使用ES2015班反應,你需要手動綁定this
到您的類方法。 您可以在構造函數中進行此操作( 建議使用 ):
constructor(props) {
super(props);
this.submitHandler = this.submitHandler.bind(this);
}
或將處理程序設置為onSubmit
道具時:
<form onSubmit={this.submitHandler.bind(this)}>
也許您必須像這樣在構造函數內部調用super 。 這是在您的課堂內完成的
constructor(props) { super(props); }
之后,您可以使用this.props.myProperty
希望能奏效
隨着es2016,你需要手動綁定this
給喜歡你的類方法:
constructor(props) {
super(props);
this.submitHandler = this.submitHandler.bind(this);
}
表格處理程序
<form onSubmit={this.submitHandler.bind(this)}>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.