React中提交修改后表单字段值的问题排查

我帮你排查了代码里的几个关键问题，这应该就是导致你无法提交修改后值的核心原因：

1. 模态框显示逻辑完全颠倒 #

你在render里写的是 !this.props.displayNameModalActive && <div...>，这意味着只有当模态框不激活的时候才会渲染输入框区域，而当你打开模态框（displayNameModalActive为true）时，反而看不到输入框！这直接导致你修改的内容根本不是最终提交的那个组件的state。

2. 输入框未设置为受控组件 #

你用了defaultValue来初始化输入框，但没有把value绑定到state。虽然你的handleDisplayNameChange会更新state，但输入框的显示值不会和state保持实时同步（非受控组件的defaultValue只会在组件挂载时生效一次），这可能导致state和输入框实际显示的值不一致。

3. 未同步props更新到state #

当父组件传入的displayName变化时，子组件的state不会自动更新，因为constructor只会在组件初始化时执行一次。如果父组件更新了用户信息，你的输入框不会显示最新的值。

修改后的完整代码 #

class DisplayNameModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayName: props.displayName,
      email: props.email.split('@')[0]
    };
    this.updateDisplayName = this.updateDisplayName.bind(this);
    this.handleDisplayNameChange = this.handleDisplayNameChange.bind(this);
  }

  // 同步props更新到state
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.displayName !== prevState.displayName) {
      return {
        displayName: nextProps.displayName
      };
    }
    return null;
  }

  updateDisplayName() {
    const { email } = this.props;
    const { displayName } = this.state;
    const user = { email, displayName };
    
    superagent
      .put('/api/user')
      .send({ user })
      .then(this.props.closeModal); // 调用父组件传入的关闭方法
  }

  handleDisplayNameChange(e) {
    this.setState({
      displayName: e.target.value
    });
  }

  render() {
    const { config, displayNameModalActive, closeModal } = this.props;
    const { contentStrings } = config;

    return (
      <div>
        {/* 修正显示逻辑：激活时才渲染模态框 */}
        {displayNameModalActive && (
          <div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
            <div className='display-name-content'>
              <h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
              <p>{contentStrings.displayNameModal.subHeading}</p>
              {/* 改为受控组件，绑定value到state */}
              <input
                type="text"
                value={this.state.displayName}
                onChange={this.handleDisplayNameChange}
                minLength="3"
                maxLength="15"
              />
              <button
                type='submit'
                onClick={this.updateDisplayName}
                className='btn btn--primary btn--md'
              >
                <span>{contentStrings.displayNameModal.button}</span>
              </button>
              {/* 给取消按钮绑定关闭事件 */}
              <p className='cancel' onClick={closeModal}>{contentStrings.displayNameModal.cancel}</p>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default DisplayNameModal;

关键修改点说明 #

• 修正模态框显示逻辑：把!displayNameModalActive改成displayNameModalActive，确保激活时才渲染输入区域。
• 转为受控组件：将输入框的defaultValue替换为value={this.state.displayName}，保证输入框的值和state完全同步。
• 同步props到state：添加getDerivedStateFromProps生命周期方法，当父组件传入的displayName变化时，自动更新子组件的state。
• 修复closeModal调用：原来的this.closeModal是错误的，应该调用父组件传入的this.props.closeModal。
• 添加取消按钮的点击事件：给取消文本绑定closeModal，让用户可以正常关闭模态框。

这样修改后，你的输入框就能正确同步修改后的值，提交时也能发送最新的displayName到接口了。

内容的提问来源于stack exchange，提问作者Matt