Reactjs 单击按钮时，输入不会更新

Im React newbie:）。我创建了一个非常简单的React控件，名为CustomInput，但当单击该按钮时，onChange处理程序启动，但当它完成时，handler中的值是可以的，但它不会在表单上更新（或被覆盖）

问题在哪里

我的CustomInput代码如下：

"use strict";

var React = require('react');

var CustomInput = React.createClass({
    propTypes: {
        value: React.PropTypes.string.isRequired,
        name: React.PropTypes.string.isRequired        
        /*
    error: React.PropTypes.string
    label: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired,
    placeholder: React.PropTypes.string,
    value: React.PropTypes.string,    
    */
    },

    getInitialState: function() {
        debugger;
        return {
            value: '',
            errors: {},
            dirty: false
        };
    },

    onChange: function(event) {
        debugger;        
        var value = event.target.value + "%";
        this.state.value = value;
        console.log("onChange: "+this.state.value);
        return this.setState({value: this.state.value});        
    },

    render: function () {
        var wrapperClass = 'form-group';
        if (this.props.error && this.props.error.length > 0) {
            wrapperClass += " " + 'has-error';
        }

        var textStyle = { "text-align": "center" };

        return (
        <div className={wrapperClass}>
        <label htmlFor={this.props.name}>{this.props.label}</label>
        <div className="field">
        <input type="text"
        name={this.props.name}
        className="form-control"
        placeholder="enter value"
        ref={this.props.name}
        value={this.props.value}
        onChange={this.onChange}
        style={textStyle}
        />
        <div className="input">{this.props.error}</div>
        </div>
        </div>
    );
}
});

module.exports = CustomInput;

但效果仍然相同：新值被原始值覆盖。

onChange:function（event）{
onChange: function(event) {
    var value = event.target.value + "%";
    // this.state.value = value; << dont do this
    return this.setState({ value }, () => console.log("onChange: ", this.state.value));        
},

var值=event.target.value+“%”；
//this.state.value=value；console.log（“onChange:，this.state.value））；
},

---

切勿直接改变状态，否则

setState

将无法触发重新渲染，因为它认为组件已使用新状态更新。

已删除，但不进行更改。有什么东西将我的值覆盖为原始值？回调显示ok注释，例如“onChange:12%”，但有些东西将值覆盖为原始值。我在帖子中添加了一个组件的源代码。

value={this.props.value}

它是从prop读取的，而不是

this.state.value

Where？：）我看不到itCtrl+F

value={this.props.value}

onChange: function(event) {
    debugger;        
    var value = event.target.value + "%";
    //this.state.value = value;
    //console.log("onChange: "+this.state.value);
    return this.setState({ value }, () => console.log("onChange: ", this.state.value));                
},

onChange: function(event) {
    var value = event.target.value + "%";
    // this.state.value = value; << dont do this
    return this.setState({ value }, () => console.log("onChange: ", this.state.value));        
},