我有一个简单的react组件的形式，我相信有一个受控的输入:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<form className="add-support-staff-form">
<input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
</form>
)
}
onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
}
export default MyForm;
当我运行我的应用程序，我得到以下警告:
警告:MyForm正在将文本类型的未受控输入更改为
控制。输入元素不应该从不受控切换到
控制(反之亦然)。决定是使用受控的还是
在组件的生命周期内不受控制的输入元素
我相信我的输入是受控的，因为它有一个值。我在想我做错了什么?
我使用的是React 15.1.0
为了动态设置表单输入的状态属性并控制它们，你可以这样做:
const inputs = [
{ name: 'email', type: 'email', placeholder: "Enter your email"},
{ name: 'password', type: 'password', placeholder: "Enter your password"},
{ name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]
class Form extends Component {
constructor(props){
super(props)
this.state = {} // Notice no explicit state is set in the constructor
}
handleChange = (e) => {
const { name, value } = e.target;
this.setState({
[name]: value
}
}
handleSubmit = (e) => {
// do something
}
render() {
<form onSubmit={(e) => handleSubmit(e)}>
{ inputs.length ?
inputs.map(input => {
const { name, placeholder, type } = input;
const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string
return <input key={name} type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
}) :
null
}
<button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
</form>
}
}
我知道其他人已经回答了这个问题。但这里有一个非常重要的因素，可能会帮助其他经历类似问题的人:
你必须有一个onChange处理程序添加在您的输入字段(例如textField，复选框，无线电等)。始终通过onChange处理程序处理活动。
例子:
<input ... onChange={ this.myChangeHandler} ... />
当你使用复选框时，你可能需要用!!来处理它的选中状态。
例子:
<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >
参考:https://github.com/facebook/react/issues/6779 # issuecomment - 326314716
为了动态设置表单输入的状态属性并控制它们，你可以这样做:
const inputs = [
{ name: 'email', type: 'email', placeholder: "Enter your email"},
{ name: 'password', type: 'password', placeholder: "Enter your password"},
{ name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]
class Form extends Component {
constructor(props){
super(props)
this.state = {} // Notice no explicit state is set in the constructor
}
handleChange = (e) => {
const { name, value } = e.target;
this.setState({
[name]: value
}
}
handleSubmit = (e) => {
// do something
}
render() {
<form onSubmit={(e) => handleSubmit(e)}>
{ inputs.length ?
inputs.map(input => {
const { name, placeholder, type } = input;
const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string
return <input key={name} type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
}) :
null
}
<button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
</form>
}
}
简而言之，如果你正在使用类组件，你必须使用状态初始化输入，就像这样:
this.state = { the_name_attribute_of_the_input: "initial_value_or_empty_value" };
你必须对所有的输入都这么做你想在代码中改变它们的值。
在使用功能组件的情况下，你将使用钩子来管理输入值，并且你必须为以后想要操作的每个输入输入初始值，如下所示:
const [name, setName] = React.useState({name: 'initialValue'});
如果你不想有初始值，你可以放一个空字符串。
