Question

我正在使用react，redux和es2015开发一个todo应用程序。我刚刚介绍了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;

如上面的注释所述，submit方法中的setState（）调用应该将输入重置为空值，并且输入只保留最后输入的内容。控制台中也没有错误或警告。

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

由于

Answer 1

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

添加值属性

像这样：

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

**还要假设onBlur是您的故意行为。

Answer 2

首先在另一个变量中抓取值，然后将状态设置为＆＃39;＆＃39;＆＃39;，然后调度：

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

SetState不在反应组件中触发

2 个答案: