Question

我制作了一个简单的表单，我想在按下输入时执行操作，但由于某种原因它只适用于第二个输入按，而不是第一个

组件的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);
}

Answer 1

可能是因为它将状态更新排队而不是像使用this.setState那样立即实现更改，因此在调用函数时无法访问状态的新值吗？

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

React bootstrap表单仅在第二次输入时提交

1 个答案: