SetState не срабатывает в компоненте реакции

Question

Я работаю над приложением todo, используя реакцию, redux и es2015. Я только что представил реакцию-бутстрап, и мой простой контроль ввода не работает должным образом. код выглядит следующим образом:

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

Похоже, ваш контроль форма не связана со значением вашего отслеживание состояния. Добавьте атрибут значение для вашего <FormControl />

Как так:

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

** Также будет предполагать ONBLUR является намеренное поведение с вашей стороны.

Answer 2

захватить значение первого в другой переменной, а затем установить состояние на «», а затем отправка:

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