SetState在反應組件中沒有觸發

我正在使用react，redux和es2015的todo應用程序。我剛剛介紹了react-bootstrap，並且我的簡單輸入控件無法按預期工作。的代碼如下：SetState在反應組件中沒有觸發

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（）調用，它應該重置輸入到一個空值不工作，並且輸入只是保留無論是最後鍵入。控制檯中也沒有錯誤或警告。

我明顯錯過了這裏的東西，但我無法弄清楚什麼。

感謝

來源

2016-05-15 Pinetree

看起來你的窗體控件沒有連接到你的價值跟蹤狀態。值屬性添加到您的<FormControl />

像這樣：

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

**也要去承擔的onblur是你的一部分故意行爲。

來源

2016-05-15 23:04:22

模糊是故意的，我懶得多一個點擊，因爲這只是一個簡單的測試應用程序 – Pinetree

抓住價值首先在另一個變量，然後設置狀態到「」，然後調度：

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

來源

2016-05-15 22:47:45 JordanHendrix

試過這個，它沒有工作... – Pinetree

SetState在反應組件中沒有觸發

回答

相關問題