react实现表单输入后阻止页面刷新

在React中，可以通过事件对象的preventDefault()方法来阻止表单提交后页面的刷新。具体实现方式如下：

1. 在表单的onSubmit事件中调用preventDefault()方法来阻止表单提交后页面的刷新。

handleSubmit(event) {
  event.preventDefault();
  // 处理表单提交逻辑
}

2. 将表单中的input元素与state中的数据绑定，当input发生变化时，更新state中的数据。

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      message: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;
    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <label>
          Message:
          <textarea name="message" value={this.state.message} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

通过上述方式，可以实现在输入表单后阻止页面刷新的效果。