javascript - 如果数据更改，则使按钮处于事件状态

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

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中保留输入是否被触摸的状态。