带有React的SweetAlert没有更新jsx文件中表单中输入字段中的值

Question

首先，我必须说这是我第一次接触react代码，所以我的问题可能很棘手，尝试了几件事，但真的不知道还能做什么。我正在使用SweetAlert。你可以在这里看到一些例子。在jsx文件上。

我有以下代码。

handleChange(e) {
const { name, value } = e.target; //e.target;
this.setState({ [name]: value });
console.log("HandleChange: ",e);
console.log("Target: ",e.target);
console.log("name: ",name);
console.log("value: ",value);
}
const editAnswer =(index) => {
this.setState({
editAnswerPopup: (
<SweetAlert
showCancel
title={"Edit Answer"}
onConfirm={() => saveAnswer()}
onCancel={() => cancelAnswer()}
type={'controlled'}
dependencies={[this.state.changeText, this.state.changeValue]}
>
<form>
<h5>{index}</h5>
{AnswerValueValidationError()}
{AnswerTextLenghtValidationError()}
<input
id="changeText"
name="changeText"
type={'text'}
className="form-control"
value={this.state.changeText}
onChange={this.handleChange.bind(this)}
placeholder={'Text'}
/>
<br />
<input
id="changeValue"
name="changeValue"
type={'number'}
className="form-control"
value={this.state.changeValue}
onChange={this.handleChange.bind(this)}
placeholder={'Value'}
/>
</form>
</SweetAlert>
)
});
}

当我按下其中一个输入字段内的任何键时，handleChange事件会捕获更改，并在控制台中向我显示什么是新值(当前值加上按下的键(，但它不会反映在输入中，就像它会被锁定一样(或者我会进行某些验证，不允许它更改(。handleChange事件由其他几个输入字段调用，它们正常工作。与这些不同的是，表单位于Sweetalert中，并且在我单击特定按钮编辑内容之前，组件不会添加到state/DOM中，这与加载页面时显示的其他组件不同。

你知道我做错了什么吗？该代码部分取自SweetAlert的最后一个示例。不同的是，这个例子有一些额外的代码要在ts文件中使用，而我使用的是jsx。但就我对React的理解而言，我的代码应该可以工作。但事实并非如此，所以我想，我遗漏了一些东西。

Answer 1

问题是我在一个状态的另一个属性(editAnswerPopup(中设置一个属性的状态(changeText(。