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

详细信息容器已经创建，并且仅返回有关已传递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中按下按钮重新渲染组件

1 个答案: