Question

我正在使用一个非常全面的表格，并且想知道是否存在阻止我进行以下状态初始化的聪明方法：

class Demo extends React.Component {



  state = { firstName = "",
            secondName = "" };
           //and so on...

  render() {
    const { firstName, secondName } = this.state;
    //and so on

    return (
      <div>
        <Form>
          <Form.Input
            placeholder="Name"
            name="name"
            value={firstName}
          />
         //and so on
        </Form>
      </div>
    );
  }
}

如果我不使用空字符串初始化状态，则会收到以下警告：

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

最新的处理方式是什么？谢谢！斯蒂芬

Answer 1

如果您使用value作为状态值，那么在未初始化状态的情况下，它将在render方法中为undefined。因此，建议您像执行操作一样初始化状态，因为您已经控制了输入。我相信这会对您的情况有所帮助

Answer 2

类似的方法应该可以工作，但是问题是您需要为每个字段输入输入处理程序，如果您使用的格式很大，则很麻烦。

class Demo extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        firstName: '',
        lastName: '',
        submitted: false
    };
   }

   handleFirstName = (e) => {
         this.setState({firstName: e.target.value});
   }

   handleLastName = (e) => {
         this.setState({lastName: e.target.value});
   }
   handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });
        const payload = [{this.state.firstName, this.state.lastName}];
        this.props.saveData(payload);
   }

   render() {
    return(
        <form>
            <label>
                Firstname:
                <input type="text" value={this.state.firstName} onChange={this.handleFirstName} />
            </label>

              <label>
                Lastname:
                <input type="text" value={this.state.lastName} onChange={this.handleLastName} />
            </label>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>          
    );
  }
}

处理表单的更好解决方案是使用react-final-form之类的lib

初始化表单状态存储的有效方法

2 个答案: