微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用React的SweetAlert无法更新jsx文件中表单中输入字段中的值

如何解决使用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 举报,一经查实,本站将立刻删除。