Question

大家好，我有一个报名页面，并排登录表格。我在表单的电子邮件输入部分使用了react组件。但是，当填入一个，两个都同时填写，有没有办法防止这种情况？

Answer 1

没有任何代码，这不容易回答。但是，听起来您正在使用商店来保存表单的数据。

尝试切换以让每个组件以状态存储自己的数据。

class Form extends React.Component {
    constructor(){
        super();
        this.state = {val1: null, val2: null};
        this.setInputVal = this.setInputVal.bind(this);
    }
    setInputVal(e){
        this.state[e.target.name] = e.target.value;
        this.setState(this.state);
    }
    render(){
        return (
            <form>
                <input name="val1" value={this.state.val1} onChange={this.setInputVal} />
                <input name="val2" value={this.state.val2} onChange={this.setInputVal} />
            </form>
        )
    }
}

从这里开始，让你的提交更新存储数据做一些事情，但不要将输入的值分配给来自商店的内容。

在页面上两次使用react form组件，而不必同时填写它们

1 个答案: