SetState 未在 React 组件中触发

Question

我正在使用 React、redux 和 es2015 开发一个待办事项应用程序。我刚刚介绍了 react-bootstrap，我的简单输入控件没有按预期工作。代码如下：

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
import { FormGroup, ControlLabel, Input, FormControl } from 'react-bootstrap'

class AddTodo extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.submit = this.submit.bind(this);

        this.state = {
            value: ''
        }
    }

    handleChange(e) {
        this.setState({ value: e.target.value }); // WORKS
    }

    submit() {        
        this.props.dispatch(addTodo(this.state.value)); // WORKS
        this.setState({ value: '' });  // FAILS
    }

    render() {     
        return (
            <FormGroup>
                <ControlLabel>Add Todo</ControlLabel>
                <FormControl 
                    type='text' 
                    onChange={this.handleChange}
                    onBlur={this.submit}/>           
            </FormGroup>
        );
    }
}

AddTodo = connect()(AddTodo);

export default AddTodo;

如上面的评论所述，提交方法中的 setState() 调用应该将输入重置为空值，但它不起作用，输入只保留最后输入的内容。控制台中也没有错误或警告。

我显然在这里遗漏了一些东西，但我无法弄清楚是什么。

谢谢

Answer 1

先在另一个变量中获取值，然后将状态设置为''，然后调度：

submit() {        
    let val = this.state.value;
    this.setState({ value: '' });  
    this.props.dispatch(addTodo(val)); 
}

Answer 2

看起来您的表单控件未连接到您在状态中跟踪的值。为您的 <FormControl />

添加一个值属性

像这样：

<FormControl 
    type='text'
    value={this.state.value}  <-- Yay value updates!
    onChange={this.handleChange}
    onBlur={this.submit}/>

**同时假设 onBlur 是您的故意行为。

SetState 未在 React 组件中触发

SetState not firing in react component

reactjs

redux

react-bootstrap

react-redux