Javascript 组件正在更改要控制的文本类型的非受控输入？

当我尝试写入表单并将其保存到状态时，我遇到以下错误：

警告：组件正在将文本类型的非受控输入更改为 被控制。输入元件不应从非受控切换到非受控 受控（反之亦然）。决定是使用受控的还是 部件寿命期内的非受控输入元件

从“React”导入React；
类ExerciseNew扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
console.log（this.state）
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
提交
)
}
}
导出默认值；

我觉得很奇怪，因为我正在关注的文件，以及西班牙语

我尝试使用babeljs和ES7的功能，以便不必创建构造函数，所以我做了如下操作：

import React from 'react';

class ExerciseNew extends React.Component {

  state = {}

  handleSubmit = (e) => {
      e.preventDefault();
      console.log(this.state)
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <div className="container">
        <form
          onSubmit={this.handleSubmit}
          >
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              placeholder="title"
              name="title"
              onChange={this.handleChange}
              value={this.state.title}
             />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              placeholder="description"
              name="description"
              onChange={this.handleChange}
              value={this.state.description}
             />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              placeholder="img"
              name="img"
              onChange={this.handleChange}
              value={this.state.img}
             />
          </div>
          <div className="form-row">
            <div className="col">
              <input
                type="text"
                className="form-control"
                placeholder="leftColor"
                name="leftColor"
                onChange={this.handleChange}
                value={this.state.leftColor}
              />
            </div>
            <div className="col">
              <input
                type="text"
                className="form-control"
                placeholder="rightColor"
                name="rightColor"
                onChange={this.handleChange}
                value={this.state.rightColor}
              />
            </div>
          </div>
          <button
          type="submit"
          className="btn btn-primary"
          >
            Submit
          </button>
        </form>
      </div>
    )
  }
}

export default ExerciseNew;

从“React”导入React；
类ExerciseNew扩展了React.Component{
状态={}
handleSubmit=（e）=>{
e、 预防默认值（）；
console.log（this.state）
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
提交
)
}
}
导出默认值；

但我还是得到了同样的错误。

您的表单已经是一个错误

您收到警告，因为您尚未初始化您的状态。您需要使每个变量处于如下状态：

this.state = {
  title: '',
  description: '',
  img: '',
  leftColor: '',
  rightColor: ''
}

注意：A您已经在为

handleSubmit

和

handleChange

使用

箭头函数

，您不需要在构造函数中绑定它们

this.handleChange = this.handleChange.bind(this);  //not needed
this.handleSubmit = this.handleSubmit.bind(this);  //not needed

实例：

class ExerciseNew扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“，
说明：“，
img:“”，
leftColor:“”，
右颜色：“，
};
}
handleSubmit=（e）=>{
e、 预防默认值（）；
console.log（this.state）
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
提交
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

您的表单已被删除

您收到警告，因为您尚未初始化您的状态。您需要使每个变量处于如下状态：

this.state = {
  title: '',
  description: '',
  img: '',
  leftColor: '',
  rightColor: ''
}

注意：A您已经在为
handleSubmit
和
handleChange
使用
箭头函数
，您不需要在构造函数中绑定它们

this.handleChange = this.handleChange.bind(this);  //not needed
this.handleSubmit = this.handleSubmit.bind(this);  //not needed

实例：


class ExerciseNew扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“，
说明：“，
img:“”，
leftColor:“”，
右颜色：“，
};
}
handleSubmit=（e）=>{
e、 预防默认值（）；
console.log（this.state）
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
提交
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

只是强调一下：事情发生的原因是
value={this.state.title}
最初是
未定义的。如果根本没有
值
道具，反应也是一样的。所以组件应该是不可控的。。。但后来变得可控了。这就是用空字符串初始化状态的方式，正如@ravibagul91 helps所建议的那样，必须突出显示：事情发生的原因是
value={this.state.title}
最初是
未定义的。如果根本没有
值
道具，反应也是一样的。所以组件应该是不可控的。。。但后来变得可控了。这就是用空字符串初始化状态的方式，正如@ravibagul91所建议的那样