如何创建支持初始值与内容修改的类式React文本输入组件

问题根因 #

你遇到的问题核心是混淆了React受控组件和非受控组件的使用逻辑，代码存在两个核心问题：

• 你给input注释了value绑定，输入框没有和你内部维护的state.value做关联，所以修改state的时候输入框不会同步更新
• 如果你之前绑定的是this.props.value，props是父组件传入的只读属性，你修改内部state不会触发props更新，就会出现只能用初始值无法修改的情况

修复方案 #

方案1：内部维护状态（推荐，符合你需要初始值+内部可修改的需求） #

这种方案组件自己维护输入状态，仅把初始值、失焦回调等开放给父组件：

import * as React from "react";

export class TextBox extends React.Component<{ 
  value: any, 
  onBlur?: (value: any) => void, 
  isAutoFocus?: boolean 
}> {
  constructor(props) {
    super(props);
    // 初始化时读取父组件传入的value作为初始值
    this.state = {
      value: props.value
    }
  }

  // 可选：如果需要支持父组件后续传入新值同步更新，加这个生命周期
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({ value: this.props.value });
    }
  }

  public render() {
    return (
      <input 
        // 绑定内部state到输入框的value属性
        value={this.state.value}
        autoFocus={this.props.isAutoFocus ?? false}
        onChange={(event) => { 
          console.log("set new value"); 
          this.setState({ value: event.target.value }) 
        }}
        onBlur={() => {
          this.props.onBlur?.(this.state.value);
        }}
      />
    );
  }
}

父组件使用示例：

// 父组件内使用
<TextBox 
  value="初始值" 
  onBlur={(val) => console.log("输入框失焦，当前值：", val)}
  isAutoFocus={true}
/>

方案2：完全受控组件（状态全由父组件维护） #

如果你的输入状态需要父组件完全管控，可以用这个方案，组件只做视图层渲染：

import * as React from "react";

export class TextBox extends React.Component<{ 
  value: any, 
  onChange: (newVal: any) => void,
  onBlur?: (value: any) => void, 
  isAutoFocus?: boolean 
}> {
  public render() {
    return (
      <input 
        value={this.props.value}
        autoFocus={this.props.isAutoFocus ?? false}
        onChange={(event) => { 
          console.log("set new value"); 
          this.props.onChange(event.target.value);
        }}
        onBlur={() => {
          this.props.onBlur?.(this.props.value);
        }}
      />
    );
  }
}

父组件使用示例：

// 父组件内需要自己维护状态
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputVal: "初始值" }
  }
  render() {
    return (
      <TextBox 
        value={this.state.inputVal} 
        onChange={(newVal) => this.setState({ inputVal: newVal })}
        onBlur={(val) => console.log("输入框失焦，当前值：", val)}
      />
    )
  }
}

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