React componentWillMount setState在输入中没有显示状态值

React componentWillMount setState in input no showing state value

本文关键字:显示 状态 componentWillMount setState 输入 React      更新时间:2023-09-26

我是React的新手,在输入或状态设置方法中遇到了一些defaultValue问题。说明这一点的代码示例:https://jsfiddle.net/4gxqw5c5/

我预计,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

很抱歉问了这个愚蠢的问题,在官方文档中找到了答案:)https://facebook.github.io/react/docs/forms.html#controlled-组件