Question

我正在努力学习React。我有很好的JS知识，但知道我无法处理React中的简单情况。我在表单元素上放了一个事件，它有2个子元素，我正在尝试做某事（在这种情况下没关系），所以我用它的事件对象编写了一个处理程序。我实际上知道触发事件的最深元素称为“目标”或“源”元素，可以作为 event.target 使用。在我的情况下，event.target不是提交的按钮元素，而是表单元素，它上面有一个事件。所以我无法理解这种情况。

这是我的代码`

    const onFormSubmit = (event) => {
    event.preventDefault();

    const option = event.target.elements.option.value;
}

    let template = (
        <div>
            <form onSubmit={onFormSubmit}>
                <input typa='text' name='option'/>
                <button>Add Option</button>
            </form>
        </div>
    );

我认为event.target是按钮元素，但它不是它，而是表单元素。

Answer 1

您可以尝试以下操作：

设置初始状态{ optionInput: '' }
将一个处理程序onChange添加到您的输入并将该值存储在状态

在需要时从状态获取值（onFormSubmit）

const onFormSubmit = (event) => {
    event.preventDefault();
    const option = this.state.optionInput;
}

const handleChange = (event) => {
     const {value} = event.target
     // Now set state - setState() 
     this.setState({ optionInput: value })
};

let template = (
    <div>
        <form onSubmit={onFormSubmit}>
            <input typa='text' value={this.state.optionInput} name='option' onChange={handleChange}/>
            <button>Add Option</button>
        </form>
    </div>
);

也许您必须使用this关键字重构这些内容。因为我无法看到你是否使用类组件或功能更强大的方式

React中表单元素的委派

1 个答案: