如果数据发生变化，则使按钮处于活动状态。

Question

如何跟踪更改，如果输入字段的值已经存在。可能需要激活按钮。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value="John" />
        </label>
        <input type="submit" value="send" />
      </form>
    );
  }
}

- stiv

Answer 1

不要像这样定义值：value="John"，因为它不是动态的。您将无法更改它。最好在状态中定义默认值，如下所示- this.state = {name: 'John'}。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'John', isChanged: false };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({name: event.target.value, isChanged: true});
  }
  handleSubmit=e=>{
    e.preventDefault();
    console.log(this.state)
  }
  render() {
    const {name, isChanged} = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={this.handleChange}/>
        </label>
        { isChanged && <input type="submit" value="send" /> }
      </form>
    );
  }
}

隐藏提交按钮-https://codesandbox.io/s/form-t00t4 编辑：在ischanged中保持输入是否被触摸的状态。

- akhtarvahid

---

非常感谢。函数会是什么样子：如果数据已更改，则显示按钮？ - stiv

@stiv 这取决于需求，如果您想在提交后隐藏，则隐藏它。 - akhtarvahid

@stiv，请查看隐藏提交按钮的演示。如果对您有帮助，请接受/投票支持此答案。 - akhtarvahid

我会尽力更好地解释：1）最初没有按钮；2）当数据被输入时，按钮被显示。 - stiv

@stiv 在 handleChange 处理输入变化时，现在要保持一个状态来表示输入是否被触摸过。我已经更新了代码，请检查。另外保留了一个状态变量 ischanged，用于知道输入是否曾经被更新过。 - Partha Roy

没问题 @VahidAkhtar此外，您可以通过在handleChange方法中检查输入是否具有任何值或空字符串来隐藏按钮，如果是这样，则只需将isChanged设置为false。 - Partha Roy