在 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>
    );
  }
}

详细信息容器已经创建，只是 returns 一些关于传入的 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}
  );
}

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

Having a component re-render on button press in React

javascript

reactjs

react-component