React新手求助：点击按钮后CustomInput组件值未更新问题

嘿，作为React新手遇到这种问题很正常，我来帮你捋捋可能的原因和解决办法～

核心问题：受控组件的逻辑没走通 #

React里表单组件的更新逻辑主要分受控组件和非受控组件，你遇到的情况大概率是受控组件的实现出了问题——简单说就是组件的value由外部（父组件的state）控制，但你没正确通知外部更新state，或者组件自己维护了本地状态导致和外部不同步。

可能的原因1：没有调用props.onChange通知父组件更新state #

你的CustomInput接收了value prop，但点击按钮触发处理函数后，只在函数内拿到了正确的值，却没把这个新值传递给父组件，父组件的state没更新，自然不会把新的value传给CustomInput，表单显示就不会变。

可能的原因2：组件内部维护了本地state，和props.value不同步 #

如果你的CustomInput自己用getInitialState初始化了本地状态来存输入值，但没有在props.value变化时同步更新本地state，就会出现“函数内值正确，但表单被旧值覆盖”的情况——因为父组件的state没更新，下次渲染时props.value还是旧的，组件本地state没同步就会被冲掉。

正确的受控组件实现示例 #

结合你用的React.createClass语法，给你写个正确的CustomInput和父组件用法：

CustomInput组件代码

"use strict";
var React = require('react');

var CustomInput = React.createClass({
  propTypes: {
    value: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired // 必须定义onChange的prop类型
  },

  handleButtonClick: function() {
    // 这里模拟点击按钮后生成新值，你可以换成自己的业务逻辑
    var newValue = `${this.props.value}_updated`;
    // 关键：调用父组件传过来的onChange，把新值传递回去
    this.props.onChange(newValue);
  },

  render: function() {
    // 注意：这里的input value直接用props.value，不维护本地state
    return (
      <div>
        <input 
          type="text" 
          value={this.props.value} 
          name={this.props.name} 
        />
        <button onClick={this.handleButtonClick}>更新输入值</button>
      </div>
    );
  }
});

父组件用法

var ParentComponent = React.createClass({
  getInitialState: function() {
    // 父组件维护输入值的state
    return { inputValue: '初始值' };
  },

  handleInputChange: function(newValue) {
    // 关键：调用setState更新父组件的state，这样CustomInput的value才会更新
    this.setState({ inputValue: newValue });
  },

  render: function() {
    return (
      <CustomInput 
        value={this.state.inputValue} 
        name="myCustomInput" 
        onChange={this.handleInputChange} 
      />
    );
  }
});

关键总结 #

• 受控组件的核心是外部(state)控值，内部(onChange)通知更新，组件自身不要维护输入值的本地状态（除非你明确要用非受控组件，那应该用defaultValue而不是value）。
• 一定要确保父组件的onChange处理函数调用了setState，只有父组件state更新了，传递给子组件的value才会变化，表单显示才会同步。
• 如果确实需要本地状态（比如复杂的交互），要在props.value变化时同步更新本地state（旧版React用componentWillReceiveProps，新版用getDerivedStateFromProps）。

内容的提问来源于stack exchange，提问作者P.K.