admin 管理员组

文章数量: 1086019

I am using React JS to render an input type="text". I know that if you use the value property React renders a readonly textbox. So, I wrote a small ponent of my own(see below).

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, '')}
                    />);
    }
});

Every time I try to render this ponent with a different value I don't see the ponent getting updated with the updated value.

I am using React JS to render an input type="text". I know that if you use the value property React renders a readonly textbox. So, I wrote a small ponent of my own(see below).

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, '')}
                    />);
    }
});

Every time I try to render this ponent with a different value I don't see the ponent getting updated with the updated value.

  • javascript
  • reactjs
Share Improve this question edited May 8, 2015 at 5:05 mohkhan asked May 8, 2015 at 4:49 mohkhanmohkhan 12.3k2 gold badges26 silver badges27 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 7

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

You mean you are running

<MyComponent value={someValue} />

with different values?

If that's the case, the ponent does not use the new value because you are not telling it to.

The ponent keeps its state between rerenders and the value shown in the text field es from the state. If you don't update the state based on the new props, nothing will change. You have to implement ponentWillReceiveProps:

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

From the docs:

Invoked when a ponent 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.

本文标签： javascriptInput type text39s value not getting updated while using React JSStack Overflow

版权声明：本文标题：javascript - Input type text&#39;s value not getting updated while using React JS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744021839a2519936.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。