React组件状态变更未重渲染？多表单占位符同步问题求解

你遇到的核心问题是每个LengthForm组件实例都维护着自己独立的state，当你在其中一个表单输入时，只会更新当前组件内部的状态，另一个组件的状态完全不受影响，自然不会更新占位符。

在React中，当多个组件需要共享状态时，最佳实践是把共享状态提升到它们最近的共同父组件中管理。这样父组件可以统一控制状态，再通过props把状态和更新方法传递给子组件，确保所有子组件的状态保持同步。

修改后的代码示例 #

父组件（管理共享状态） #

import React, { Component } from 'react';
import LengthForm from './LengthForm';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // 把共享状态放到父组件中
    this.state = { length: 1 };
  }

  handleLengthChange = (newLength) => {
    // 父组件统一更新状态
    this.setState({ length: newLength });
  }

  render() {
    return (
      <div>
        {/* 两个子组件都接收父组件的length状态和更新方法 */}
        <LengthForm 
          length={this.state.length} 
          onLengthChange={this.handleLengthChange} 
        />
        <LengthForm 
          length={this.state.length} 
          onLengthChange={this.handleLengthChange} 
        />
      </div>
    );
  }
}

export default ParentComponent;

子组件（受控组件，不再维护自己的state） #

import React, { Component } from 'react';

class LengthForm extends Component {
  handleChange(event) {
    // 调用父组件传递过来的回调方法，把新值传给父组件
    this.props.onLengthChange(event.target.value);
  }

  render() {
    // 从props中获取共享的length值作为占位符
    return (
      <div className="LengthForm">
        <input 
          name="length" 
          onChange={this.handleChange.bind(this)} 
          type="number"  {/* 这里建议用type="number"代替integer，更符合HTML规范 */}
          placeholder={this.props.length}
        />
      </div>
    );
  }
}

export default LengthForm;

• 现在所有LengthForm组件的length值都来自父组件的props，当父组件的状态更新时，所有子组件都会接收到最新的props并重新渲染，确保占位符完全同步。
• 子组件不再维护自己的状态，变成了受控组件，所有状态变更都由父组件统一处理，避免了状态分散导致的不同步问题。

另外补充个小细节：你原来写的type="integer"不是标准的HTML input类型，改成type="number"后，浏览器会提供更适配的输入控件和基础验证，体验会更好。

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