在 React 中按下按钮时重新渲染组件

Question

我现在正在创建一个简单的 React 组件。基本上，用户可以输入一个 ID，当他们提交时，它会显示容器中的一些信息。代码是这样的

export default class IDContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Id: '',
      isSubmitted: false
    };
  }

  handleSubmit = (event) => {
    this.setState({
      isSubmitted: true
    });
  };

  handleChange = (event) => {
    this.setState({
      Id: event.target.value
    });
  };


  render() {
    return (
        <form onSubmit={this.handleSubmit}>
          <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
              }}
          >
            <Input type={'text'} placeholder={"Enter Id"} value={this.state.Id} onChange={this.handleChange} />
            <Button type={'submit'} > Lookup </Button>
          </div>

          <div>
            {this.state.isSubmitted && <DetailsContainer Id={this.state.Id} />}
          </div>
        </form>
    );
  }
}

details 容器已经创建好了，只是返回了一些关于已经传入的 Id 的详细信息。我可以很好地显示我传入的第一个 Id 的详细信息。但是，当我输入另一个 ID 并提交表单时，DetailsContainer 不会重新呈现，并且仍在显示旧 ID 的详细信息。我尝试移动它并添加一些逻辑（我什至将 DetailsContainer 置于我的状态以查看是否可以那样操作它），但这似乎不起作用。我看到有一个shouldComponentUpdate() 方法，这似乎是我需要使用的，但我看到的指南都将它放在DetailsContainer 中。无论如何让我将它放在 IDContainer 中，还是有更简单的方法来重新渲染 DetailsContainer？

Answer 1

我认为这里的部分问题是，一旦设置了isSubmitted，您对输入所做的每一项更改都将应用于this.state.Id 并传递到DetailsContainer。

我认为最好使用一个变量来跟踪输入状态，并使用一个变量来跟踪要传递给DetailsContainer 的 Id。

state = { Id: null, inputId: '' };

handleSubmit = (event) => {
  this.setState({
    Id: this.state.inputId
  });
};

handleChange = (event) => {
  this.setState({
    inputId: event.target.value
  });
};

render() {
  return (
    ...
    <Input ... value={this.state.inputId} />
    ...
    {this.state.Id !== null ? <DetailsContainer Id={this.state.Id} /> : null}
  );
}