如何解决使用React的SweetAlert无法更新jsx文件中表单中输入字段中的值
首先,我必须说这是我第一次接触React代码,所以我的问题可能是菜鸟,尝试了几件事,但实际上不知道该怎么办。 我正在使用SweetAlert。您可以看到一些示例here。在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内部,并且只有在单击特定按钮以编辑内容之前,该组件才会添加到状态/ DOM中,这与页面加载时显示的其他按钮不同。
关于我在做什么错的任何想法? 该代码部分取自SweetAlert的最后一个示例。不同之处在于该示例在ts文件中使用了一些额外的代码,而我使用的是jsx。但是对于我对React的理解,我的代码应该可以工作。但是事实并非如此,我想我是在错过一些东西。
解决方法
问题是我在状态的另一个属性(editAnswerPopup)中设置了一个属性的状态(changeText)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。