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

Question

在我尝试在表单中写入并保存状态时，我收到此错误：

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

import React from 'react';

class ExerciseNew extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: ''}
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  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 的文档以及西班牙语版的 this video。

我尝试使用 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;

我仍然得到同样的错误。

Answer 1

您的表单已经是controlled components。

您收到警告是因为您尚未初始化您的状态。你需要让每个变量都处于这样的状态，

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

注意：你已经在使用arrow function for handleSubmit & handleChange，你不需要在构造函数中绑定它们，

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

现场示例：

class ExerciseNew extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      title: "",
      description: "",
      img: "",
      leftColor: "",
      rightColor: "",
    };
  }

  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>
    )
  }
}

ReactDOM.render(
  <ExerciseNew/>,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>