javascript - 如果处理程序在同级组件上调用 setState，则 react 表单 event.preventDefault() 不起作用

Question

下面是一个包含三个组件的简单案例:App、ExmpleDataConsumer 和 ExampleForm。应用程序包含其他两个。

我希望在提交表单时将 ExampleForm 中文本区域的内容传输到 ExampleDataConsumer 的状态。在 doParse 中设置 ExampleDataConsumer 的状态会触发渲染，这似乎导致表单提交，重新加载页面，即使 ExampleForm 的 handleSubmit 方法调用 event.preventDefault ()。

如果我只是将 data 记录到控制台，preventDefault() 会起作用并且页面不会刷新。我错过了什么？这是在兄弟组件之间传递状态的错误方式吗？非常感激任何的帮助。

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.exampleForm = <ExampleForm doSomething = {this.doParse.bind(this)} />;
        this.exampleDataConsumer = <ExampleDataConsumer data="Hello, World!"/>;
    }

    doParse(data) {
        console.log('In App: ', data);
        this.exampleDataConsumer.setState({data: data});
    }

  render() {
    return (
      <div className="App">
          {this.exampleForm}
          {this.exampleDataConsumer}
      </div>
    );
  }
}

class ExampleDataConsumer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: props.data
        };
    }

    render() {
        return ( <div>{this.state.data}</div>)
    }
}

class ExampleForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'Some starter text.'
        };

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

    handleSubmit(event) {
        this.props.doSomething(this.state.value);
        this.setState({value: ''});
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" value={this.state.value} readOnly/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}

Answer 1

在handleSubmit(event)中，首先要调用preventDefault()方法。

 handleSubmit(event) {
    event.preventDefault();
    this.props.doSomething(this.state.value);
    this.setState({value: ''});
}