使用 React JS 时输入类型文本的值未更新

Question

我正在使用 React JS 呈现输入类型="text"。我知道如果你使用 value 属性 React 会呈现一个只读文本框。所以，我自己写了一个小组件（见下文）。

React.createClass({
    getInitialState: function() {
        var self = this;
        return {value: self.renderDefault(self.props.value, '')};
    },
    handleOnChange: function(event) {
        this.setState({value: event.target.value});

        if (this.props.onChange){
            this.props.onChange(event);
        }
    },
    renderDefault : function(value, defaultValue){
        return typeof value !== 'undefined' ? value : defaultValue; 
    },
    render: function() {
        var value = this.state.value;

        return (<input type="text"
                      size={this.renderDefault(this.props.size, 1)}
                     value={value}
                  onChange={this.handleOnChange}
               placeholder={this.renderDefault(this.props.placeholder, '')}
                    />);
    }
});

每次我尝试使用不同的值渲染此组件时，我都没有看到组件使用更新后的值进行更新。

Answer 1

Everytime I try to render this component with a different value I don't see the component getting updated with the updated value.

你是说你是运行

<MyComponent value={someValue} />

具有不同的值？

如果是这样，组件不会使用新值，因为您没有告诉它。

组件在重新呈现之间保持其状态，文本字段中显示的值来自该状态。如果你不更新基于新道具的状态，什么都不会改变。你必须实施 componentWillReceiveProps:

componentWillReceiveProps: function(nextProps) {
    this.setState({value: nextProps.value});
}

来自文档：

Invoked when a component is receiving new props. This method is not called for the initial render.

Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function will not trigger an additional render.

More about lifecycle methods.

使用 React JS 时输入类型文本的值未更新

Input type text's value not getting updated while using React JS

javascript

reactjs