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

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

你的意思是你正在运行

<MyComponent value={someValue} />

有不同的价值观？

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

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

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

来自文档：

组件接收新道具时调用。初始渲染不会调用此方法。

通过使用render()更新状态，将此作为在调用this.setState()之前对prop转换作出反应的机会。可以通过this.props访问旧道具。在此函数中调用this.setState()不会触发其他渲染。

More about lifecycle methods.

使用React JS时，输入类型文本的值不会更新

1 个答案: