React 引导表单仅在第二次输入时提交答案

【问题标题】：React bootstrap form only submits on second enter pressReact 引导表单仅在第二次输入时提交
【发布时间】：2017-03-13 14:10:51
【问题描述】：

我正在制作一个简单的表单，我想在按下 enter 时采取行动，但由于某种原因，它只适用于 第二个 enter press，而不是第一个

render() 为组件：

render() {
    return (
        <form onSubmit={this.handleSubmit}>
            <FormGroup controlId="formBasicText">
                <ControlLabel>MyLabel</ControlLabel>
                <FormControl
                    type="text"
                    value={this.state.value}
                    placeholder="Enter something"
                    onChange={this.handleChange}
                />
                <FormControl.Feedback />
            </FormGroup>
        </form>
    );
}

handleSubmit()：

handleSubmit(e) {
    e.preventDefault();
    myMethod({this.state.value});
}

为什么这只在第二次输入时有效？

编辑：明确地说，这只是目标代码的一个子集。试图运行这个当然会失败。我只是认为出现问题的可能是对象的渲染或 handleSubmit 方法。

以防万一，这里是构造函数：

constructor(props) {
    super(props);
    this.state = {
        value: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

【问题讨论】：

看起来在myMethod({this.state.value}); 之后出现错误。您是否尝试调试或检查控制台输出？
这是我的代码的精简版，我只展示了我认为可能导致错误的部分。构造函数不在这里，也没有几个辅助方法。我的方法没有在我在这里介绍的内容中定义，所以当然，如果您尝试仅运行此代码，它将失败。一切正常。控制台正在记录，没有错误。只是它只适用于 second enter press.
组件之外的任何东西都可以在输入按键时调用event.preventDefault()吗？我的意思是，如果你的应用程序中只有你的组件，它会发生吗？
对不起，我不明白你的一些措辞，但这个组件是相当孤立的。在我的 handleSubmit() 方法之外，什么都不应该调用 e.preventDefault()
检查你的应用是否有这种结构：var stopped = false;window.addEventListener('keypress', function(e){if(!stopped){e.preventDefault();stopped = true}});

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

可能是因为它对状态的更新进行了排队，而不是像使用 this.setState 时那样立即实现更改，所以调用函数时无法访问状态的新值？

看看这里：ReactJS this.setState() out of sync with this.state.myvar

【讨论】：