Javascript 如果处理程序调用同级组件上的setState，则React form event.preventDefault（）不起作用

下面是一个包含三个组件的简单案例：App、exampledataconsumer和ExampleForm。应用程序包含另外两个

我希望ExampleForm中textarea的内容在提交表单时传输到ExampleDataConsumer的状态。在

doParse

中设置ExampleDataConsumer的状态会触发一个呈现，该呈现似乎会导致表单提交、重新加载页面，即使ExampleForm的

handleSubmit

方法调用

event.preventDefault（）

如果我只是将

数据

记录到控制台，

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个.exampleForm=；
this.exampleDataConsumer=；
}
doParse（数据）{
console.log（'In-App:'，data）；
this.exampleDataConsumer.setState（{data:data}）；
}
render（）{
返回(
{this.exampleForm}
{this.exampleDataConsumer}
);
}
}
类ExampleDataConsumer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：道具数据
};
}
render（）{
返回（{this.state.data}）
}
}
类ExampleForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“一些起始文本。”
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
this.props.doSomething（this.state.value）；
this.setState（{value:'}）；
event.preventDefault（）；
}
render（）{
返回(
);
}
}

在handleSubmit（事件）中，应首先调用preventDefault（）方法

---

在代码中检查此更新。我希望这对你有帮助

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            data:'Hello, World!'
        }
    }

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

  render() {
    return (
      <div className="App">
          <ExampleForm doSomething = {this.doParse.bind(this)} />
          <ExampleDataConsumer data={this.state.data}/>
      </div>
    );
  }
}

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

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

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

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

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

    dataUpdate(ev){
        this.setState({value:ev.target.value });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" placeholder="Some starter text." value={this.state.value} onChange={this.dataUpdate.bind(this)}/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
数据：“你好，世界！”
}
}
doParse（数据）{
console.log（'In-App:'，data）；
this.setState（{data:data}）；
}
render（）{
返回(
);
}
}
类ExampleDataConsumer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：道具数据
};
}
组件将接收道具（下一步）{
this.setState（{data:nextrops.data}）；
}
render（）{
返回（{this.state.data}）
}
}
类ExampleForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.dataUpdate=this.dataUpdate.bind（this）；
}
handleSubmit（事件）{
this.props.doSomething（this.state.value）；
this.setState（{value:'}）；
event.preventDefault（）；
}
数据更新（ev）{
this.setState（{value:ev.target.value}）；
}
render（）{
返回(
);
}
}

我想我还应该通过属性管理应用程序中ExampleDataConsumer的状态。谢谢你的帮助！

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            data:'Hello, World!'
        }
    }

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

  render() {
    return (
      <div className="App">
          <ExampleForm doSomething = {this.doParse.bind(this)} />
          <ExampleDataConsumer data={this.state.data}/>
      </div>
    );
  }
}

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

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

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

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

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

    dataUpdate(ev){
        this.setState({value:ev.target.value });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" placeholder="Some starter text." value={this.state.value} onChange={this.dataUpdate.bind(this)}/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}