我正在尝试处理表单中的更改。我有标题,描述和类别。
第一个输入(标题)->无法在字段中键入。
第二个输入(描述)->可以在字段中键入,但结果不确定。
第三输入(类别DDL)->无法更改所选类别,但默认情况下在我的提示中将其输出为“饮料”;
问题:
AddDeal正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态(反之亦然)。确定在组件的使用寿命期间使用受控或不受控制的输入元素。
我在这里查看了有关受控组件的react文档,但是由于我是新手,因此很难理解。
https://facebook.github.io/react/docs/forms.html#受控组件
这是我的代码 AddDeal.js
AddDeal.js
export default class AddDeal extends React.Component { constructor(props) { super(props); // Set the state this.state = { title: '', description: '', category: 'technology' }; this.onSubmit = this.onSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } onSubmit(e) { e.preventDefault(); alert('Title is: ' + this.state.title + 'Description is: ' + this.state.description + 'Category is: ' + this.state.category); } handleChange(e) { this.setState({ title: e.target.title, description: e.target.description, category: e.target.value }); } render() { return ( <div> <h1>Add Deal</h1> <form onSubmit={this.onSubmit}> <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label> <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label> <select value={this.state.category} onChange={this.handleChange}> <option value="technology">Technology</option> <option value="food">Food</option> <option value="drink">Drink</option> <option value="books">Books</option> </select> <input type="submit" value="Submit"/> </form> </div> ); } }
为什么这么难获取输入?我应该使用道具代替状态吗?谢谢。
问题出在onChange function,您正在使用通用的onChange函数,因此与其更新具有相同值的所有值,不如更新特定状态的值。
onChange function
使用此功能:
handleChange(e) { this.setState({ [e.target.name] : e.target.value }); }
使用 name属性更新特定状态 ,您需要定义name='category'with select字段。
name='category'
检查工作示例:
class AddDeal extends React.Component { constructor(props) { super(props); // Set the state this.state = { title: '', description: '', category: 'technology' }; this.onSubmit = this.onSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } onSubmit(e) { e.preventDefault(); alert('Title is: ' + this.state.title + 'Description is: ' + this.state.description + 'Category is: ' + this.state.category); } handleChange(e) { this.setState({ [e.target.name] : e.target.value }); } render() { return ( <div> <h1>Add Deal</h1> <form onSubmit={this.onSubmit}> <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label> <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label> <select name='category' value={this.state.category} onChange={this.handleChange}> <option value="technology">Technology</option> <option value="food">Food</option> <option value="drink">Drink</option> <option value="books">Books</option> </select> <input type="submit" value="Submit"/> </form> </div> ); } } ReactDOM.render(<AddDeal/>, document.getElementById('app')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>