2016-08-03 76 views
0

我是React的新成員,在輸入或設置狀態的方法中遇到了defaultValue問題。代碼示例,它說明了這一點:https://jsfiddle.net/4gxqw5c5/React componentWillMount setState in input no showing state value

我期望,在1-2例子中的輸入將具有默認值,但他顯示佔位符值。如果您檢查輸入,您會看到已填充的值,但未顯示。在示例3中,我使用值屬性和輸入顯示實際值。 我做錯了什麼?

代碼示例:

const counter = (state = 0, action) => { 
     switch(action.type) { 
     case 'ACTION': 
      return state + 1; 
     default: 
      return state; 
     } 
    } 

    class Counter extends React.Component { 
     constructor(props) { 
     super(props) 
     this.state = {} 
     } 

     componentWillMount() { 
     this.props.some() 
     this.props.some() 
     this.props.some() 
     this.props.some() 
     this.props.some() 
     this.props.some() 
     this.setState({ 
      textValue: this.props.value 
     }) 
     } 

     componentWillReceiveProps(nextProps) { 
     console.log('props', nextProps) 
     this.setState({ 
      textValue: this.props.value 
     }) 
     } 

     render() { 
     console.log('render with: ',this.state.textValue) 
     return (
      <div> 
      <b>1.</b> Bootstrap defaultValue: <br/> 
      <ReactBootstrap.FormControl 
        name="text" 
        placeholder="Enter Text" 
        maxLength="250" 
        defaultValue={this.state.textValue} 
        required 
      /> <hr /> 
      <b>2.</b> Input defaultValue: <br/> 
      <input type="text" defaultValue={this.state.textValue} /> <hr /> 
      <b>3.</b> Input value: <br/> 
      <input type="text" value={this.state.textValue} /> 
      </div> 
     ); 
     } 
    } 

    const {createStore} = Redux; 
    const store = createStore(counter); // bind reducer 

    const render =() => { 
     ReactDOM.render(
     <Counter 
     value={store.getState()} 
     some={() => { 
      setTimeout(() => store.dispatch({type: 'ACTION'}), 100) 
     }} />, 
     document.getElementById('root') 
    ); 
    }; 

    store.subscribe(render); 
    render(); // inital render 

回答