我想知道这是否是好的做法,或者我是否应该以不同的方式设计这个应用程序,我特别关注两个'handleChange'函数,并且想知道这是否可以简化。欢迎,当然组件中每个单独元素的不同handleChange()函数? (React
用户add.js:如果要提交或使之前以某种方式修改,在未来的数据
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createUser} from '../actions/index'
class UserCreate extends Component {
constructor(props, context) {
super(props, context);
this.state = {
inputText: 'Helluuuu'
}
}
handleChangeFirstName(event) {
console.log(event.target.value);
this.setState({
inputTextFirstName: event.target.value
})
}
handleChangeLastName(event) {
console.log(event.target.value);
this.setState({
inputTextLastName: event.target.value
})
}
render() {
return (
<div>
<h2> Add User </h2>
<table className="userTable">
<tbody>
<tr>
<td>First Name:</td>
<td>Last Name:</td>
</tr>
<tr>
<td>
<input type="text"
placeholder="Hello!"
value={this.state.inputTextFirstName}
onChange={this.handleChangeFirstName.bind(this)}/>
</td>
<td>
<input type="text"
placeholder="Hello!"
value={this.state.inputTextLastName}
onChange={this.handleChangeLastName.bind(this)} />
</td>
</tr>
</tbody>
</table>
<button onClick={() =>this.props.createUser()}>Submit</button>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({createUser: createUser}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(UserCreate);
你为什么初始化状态'inputText'。我没有看到它被消费在任何地方? – Umair
你究竟是什么意思?我将'Helluuu'放在构造函数的输入文本中? –
哦,对不起,你没错,我没有把它改名为InputTextFirstName等。谢谢! –