Javascript 在按钮按下时使组件重新渲染

我现在正在创建一个简单的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>
    );
  }
}

导出默认类IDContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
Id:“”，
提交的问题：错误
};
}
handleSubmit=（事件）=>{
这是我的国家({
提交的问题：正确
});
};
handleChange=（事件）=>{
这是我的国家({
Id:event.target.value
});
};
render（）{
返回(
查找
{this.state.isSubmitted&&}
);
}
}

---

详细信息容器已经创建，只返回有关传入的Id的一些详细信息。我可以显示我传入的第一个Id的详细信息。但是，当我输入另一个Id并提交表单时，DetailsContainer没有重新呈现，仍然显示旧Id的详细信息。我尝试将其移动并添加一些逻辑（我甚至将DetailsContainer置于我的状态，以查看是否可以这样操作），但这似乎不起作用。我看到有一个

shouldComponentUpdate（）

方法，这似乎是我需要使用的，但我看到的指南都将其放在DetailsContainer中。无论如何，对于我来说，是将其保存在IDContainer中，还是有更简单的方法重新呈现DetailsContainer？

我认为这里的部分问题是，一旦设置了

isSubmitted

，您对输入所做的每一个更改都将应用于

this.state.Id

并传递到

DetailsContainer

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

我认为最好使用一个变量来跟踪输入状态，使用一个变量来跟踪要传递到

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

state={Id:null，inputId:''}；
handleSubmit=（事件）=>{
这是我的国家({
Id:this.state.inputId
});
};
handleChange=（事件）=>{
这是我的国家({
inputId:event.target.value
});
};
render（）{
返回(
...
...
{this.state.Id！==null？：null}
);
}

您的代码中有：

-是否定义了

此.state.promotionId

？Id和

promotionId

之间似乎存在一些混淆-它们应该是相同的东西吗？您的输入更新了一个不同于传递给子组件（

DetailsContainer

）的输入…是的，我的错，我已经做了上面的编辑。它们应该是一样的东西。复制代码时出错。不是答案，但您可以使用以下语法替换整个

构造函数

函数：

state={Id:''，isSubmitted:false}

我认为这与您的isSubmitted状态在第一次变为true后没有更改有关。所以第一次提交时，它会变成true并重新提交，但第二次，它已经是true了。我尝试了这个，现在发生的是，当页面最初加载为空Id时，DetailsContainer正在加载。并且，当我在表单中输入另一个id时，它仍然显示一个空id的DetailContainer。我希望在用户第一次单击enter后呈现DetailsContainer，并在每次再次单击submit时重新呈现。很抱歉，有一个输入错误-呈现的检查

应该是

this.state.id！==null

（您只想在设置了

Id

之后呈现

DetailsContainer

，以前它是在设置了

inputId

之后呈现的。啊，好的。所以现在页面在页面加载时不显示DetailsContainer，而是在用户单击搜索后呈现（谢谢！）。但是，在我为不同Id单击“提交”后，DetailsContainer不会重新呈现（仍显示第一个Id的详细信息）。这可能是您的

DetailsContainer

实现的问题。您是否尝试登录

DetailsContainer

的

render

功能以查看是否传入了值？您可能需要添加

componentdiddupdate

处理程序来处理道具更改。啊，好的。因此我必须更改

componenttDidUpdate

在DetailsContainer内部进行更新？没有办法在IDContainer内部进行更新吗？因为我不是编写DetailsContainer的人，所以我不想更改它，除非它是必须的。另外，我应该使用

componentDidUpdate

还是

shouldComponentUpdate

？我直觉上认为我可以这样做比较查看Id是否在

shouldComponentUpdate

中更改并返回True。