时间戳

首页 > 解决方案 > 初始化表单状态存储的有效方法

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

问题描述

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

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

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

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

处理这个问题的最先进方法是什么？谢谢！斯特凡

标签： reactjssemantic-ui

解决方案

像这样的东西应该可以工作，但问题是你需要每个字段的输入处理程序，如果你有巨大的表格，这很麻烦。

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

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

推荐阅读