我想知道这是不错的做法,还是我应该更好地设计这个应用程序。我特别关注两个'handleChange'功能,我想知道这是否可以以某种方式简化。当然,也欢迎其他建议。
用户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);
答案 0 :(得分:8)
当然,您可以将此减少为仅一个handleChange
方法,并且可以使用该单个方法消耗所需数量的输入字段。
此外,我认为您不需要任何第三方包。
在你的渲染方法中:
<input
type="text"
name="firstName"
placeholder="First Name!"
value={this.state.firstName}
onChange={this.handleChange.bind(this)}
/>
<input
type="text"
name="lastName"
placeholder="Last Name!"
value={this.state.lastName}
onChange={this.handleChange.bind(this)}
/>
处理更改方法
handleChange(e) {
this.setState({ [e.target.name] : e.target.value });
}
更干净。
答案 1 :(得分:1)
如果您想在将来提交之前以某种方式修改数据,那么两个handleChange
方法很好,可能会有所帮助。但可以理解的是,为更多的表单字段创建所有这些方法可能是一个巨大的麻烦。幸运的是,有所谓的two-way binding helpers。据我所知,他们仍然在React的文档中显示mixins,所以你可能会更好地使用第三方库,如react-link-state
:
import React from 'react';
import linkState from 'react-link-state';
export default MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
toggle: false
};
}
render() {
console.log(this.state);
return (
<form>
<input type="text" valueLink={linkState(this, 'username')} />
<input type="password" valueLink={linkState(this, 'password')} />
<input type="checkbox" checkedLink={linkState(this, 'toggle')}
</form>
);
}
}
答案 2 :(得分:1)
请注意复选框的工作方式有所不同!
来自React docs:
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
更简洁:
handleInputChange({target}) {
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[target.name]: value
});
}