React子组件修改父组件Props并跨组件复用的实现方法

在React里，props是只读的，子组件不能直接修改父组件传递过来的props。要实现你想要的功能，核心是遵循React的单向数据流：把共享状态放在父组件中，子组件通过调用父组件传递的回调函数来更新这个状态，所有子组件都直接使用父组件的状态作为数据源，这样就能保证所有子组件的数据同步。

问题分析 #

你现在的代码里，Input和TotalBox都在自己的组件内部维护了value的本地state，这就导致：

• 子组件修改自己的state时，不会通知父组件，父组件的state不会更新
• 父组件的state更新后，子组件的本地state也不会自动同步，造成数据不一致

解决方案步骤 #

1. 移除子组件的本地state：所有子组件直接使用父组件传递的props.value，不要自己存一份
2. 通过回调函数更新父组件状态：子组件里的所有修改操作（加减按钮、输入框变化）都调用父组件传递的changeValue函数，让父组件负责更新state
3. 父组件状态驱动所有子组件：父组件的state更新后，会自动把最新的value传递给所有子组件，实现数据同步

修改后的代码示例 #

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    // 用箭头函数避免手动bind，写法更简洁
    this.setInitState = () => {
      this.setState({ value: 0 });
    };
    this.changeValue = (newValue) => {
      console.log('parent change', newValue);
      // 转成数字类型，避免输入框返回字符串导致计算异常
      this.setState({ value: Number(newValue) });
    };
    this.state = { value: 0 };
  }

  render() {
    return (
      <Wrapper>
        <Grid>
          <Row>
            <CostBox />
            <Input changeValue={this.changeValue} value={this.state.value} />
            <TotalBox value={this.state.value} />
          </Row>
        </Grid>
      </Wrapper>
    );
  }
}

const Wrapper = styled.section`
  padding: 4em;
  background: #2B3636;
`;

render(<App />, document.getElementById("root"));

Input.js

class Input extends React.Component {
  constructor(props) {
    super(props);
    // 移除本地state，直接依赖父组件props
    this.handleChange = this.handleChange.bind(this);
    this.subtractUnit = this.subtractUnit.bind(this);
    this.addUnit = this.addUnit.bind(this);
  }

  handleChange(event) {
    // 调用父组件的回调函数，把新值传递回去更新父状态
    this.props.changeValue(event.target.value);
  }

  subtractUnit() {
    // 基于父组件的当前值计算新值，再通知父组件更新
    const newValue = this.props.value - 1;
    this.props.changeValue(newValue);
  }

  addUnit() {
    const newValue = this.props.value + 1;
    this.props.changeValue(newValue);
  }

  render() {
    return (
      <Col md={6}>
        <CenterBox>
          <h5>
            <form>
              <InputLabel># OF UNITS<br />
                <UnitInput 
                  type='number' 
                  id="total-units" 
                  value={this.props.value} 
                  onChange={this.handleChange}
                ></UnitInput>
              </InputLabel>
            </form>
            <IconContainer onClick={this.subtractUnit}>
              <MdRemoveCircleOutline style={iconLeft} />
            </IconContainer>
            <IconContainer onClick={this.addUnit}>
              <MdAddCircleOutline style={iconRight} />
            </IconContainer>
          </h5>
        </CenterBox>
      </Col>
    );
  }
}

TotalBox.js

class TotalBox extends React.Component {
  render() {
    // 直接使用父组件的props.value计算总价，无需本地state
    const totalCost = this.props.value * 175.50;
    return (
      <Col md={3}>
        <RightBox>
          <TotalCostHeader>TOTAL COST</TotalCostHeader>
          <TotalCostLabel>${totalCost.toFixed(2)}</TotalCostLabel> {/* 保留两位小数，显示更规范 */}
        </RightBox>
      </Col>
    );
  }
}

额外说明 #

• 我在changeValue里把新值转成了Number类型，因为输入框的value默认是字符串，避免后续计算出现字符串拼接的问题
• TotalBox里用toFixed(2)保留两位小数，让总价显示更符合金额的展示规范
• 如果后续你的应用复杂度提升，共享状态需要在更多组件中使用，可以考虑React Context API或者Redux这类状态管理工具，但当前场景下，父组件维护状态+回调函数的方式已经足够简洁高效

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