如何在React中获取组件输入值并将其长度传递给其他组件

存在的问题 #

• 主组件SegmentCalculator向InputBox传递的onChange回调未接收输入值参数，调用handleChange时没有传递实参，导致方法内拿到的value为undefined，访问value.length直接报错
• InputBox组件内的textarea没有正确捕获用户输入的实时值，触发回调时传递的this.state.value未同步更新，且setState是异步逻辑，即时读取状态也无法拿到最新输入内容
• 类组件的事件回调未绑定this指向，运行时会出现this指向丢失的问题
• 状态初始化不完整，初始状态下inputChars为null、inputCharsLength未定义，首次渲染时展示异常

修复后完整代码 #

class InputBox extends React.Component {
  render() {
    return (
      <label>
        Input:
        <textarea
          value={this.props.value}
          onChange={(e) => this.props.onChange(e.target.value)}
        />
      </label>
    );
  }
}

class CharacterBox extends React.Component {
  render() {
    return (
      <div>Character Count:{this.props.charCount}</div>
    )
  }
}

class SegmentCalculator extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态默认值，避免空值报错
    this.state = {
      inputChars: '',
      inputCharsLength: 0
    };
    // 绑定this指向，也可以直接把handleChange写成箭头函数
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({
      inputChars: value,
      inputCharsLength: value.length,
    });
  }

  render() {
    const characterCount = this.state.inputCharsLength;
    return (
      <div className="segment-calculator">
        <div className="input-box">
          {/* 同时传递value和onChange，实现受控组件绑定 */}
          <InputBox 
            value={this.state.inputChars}
            onChange={(val) => this.handleChange(val)} 
          />
        </div>
        <div className="characters">
          <CharacterBox charCount={characterCount}/>
        </div>
      </div>
    );
  }
}

核心改动说明 #

• 做了状态提升，输入值统一放在父组件SegmentCalculator维护，InputBox作为纯受控组件使用父传的value属性，减少冗余状态
• 透传输入框的输入值到父组件回调，确保值的链路通顺
• 补全了初始状态默认值和this指向绑定，避免运行时报错
• 移除了textarea上无效的type属性，该属性不属于textarea的合法属性

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