SetState未在React组件中触发

Question

I'm working on a todo app using react, redux and es2015. I've just introduced react-bootstrap, and my simple input control is not working as expected. The code is as follows:

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;

As noted in the comments above, the setState() call in the submit method which should reset the input to an empty value is not working, and the input just retains whatever was typed in last. There's no error or warning in the console either.

I'm obviously missing something here, but I just can't figure out what.

Thanks

Answer 1

Looks like your form control isn't connected to the value your keeping track of in state. Add a value attribute to your <FormControl />

Like so:

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

**Also going to assume the onBlur is intentional behaviour on your part.

Answer 2

Grab the value first in another variable, then set the the state to '', and then dispatch:

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