Question

“添加日”按钮如何工作，而不实际告诉它在点击时调用提交功能。这是表格

render (){
        return(
            <form onSubmit={this.submit}>
                <label htmlFor="resort">Resort Name</label>
                <input id="resort" type="text" defaultValue={this.props.resort} ref="resort" required/>

                <label htmlFor="date">Date</label>
                <input id="date" type="date" defaultValue={this.props.date} ref="date" required/>

                <div>
                <input id="rainy" type="checkbox" defaultChecked={this.props.rainy} ref="rainy" />
                <label htmlFor="rainy" class="weather"  >Rainy Day</label>
                </div>

                <div>
                <input id="sunny" type="checkbox" defaultChecked={this.props.sunny} ref="sunny" />
                <label htmlFor="sunny" class="weather" >Sunny Day</label>
                </div>

                <button>Add Day</button>
            </form>
            )
    }

这是提交功能

submit(e){
        e.preventDefault();

        this.refs.resort.value='';
        this.refs.date.value='';
        this.refs.rainy.value=false;
        this.refs.sunny.value=false;

    }

我需要一个很好的解释，按钮仍然会像这样调用提交功能。

Answer 1

这与React无关，而是与HTML有关：

你有<form onSubmit={this.submit}>这意味着每当提交表单时都会调用submit函数。例如，如果您按Enter键或单击表单中的第一个按钮，就会发生这种情况。

此处有更多信息：How is the default submit button on an HTML form determined?

Answer 2

正如@klugjo在上面的答案中提到的，这不是关于JSX的问题，而是更多基本的HTML知识

这里需要了解的重要部分是表单标签的工作原理以及表单标签的行为方式。您的问题的关键答案是form标记和button标记，尽管其中缺少一些内容

基本上使用下面的例子

<form onSubmit={this.handleSubmit}>
  // your code here
  <button type="submit">Add Day</button>
</form>

具有提交类型的按钮元素将始终在其父窗体上触发onsubmit事件（或执行窗体中指定的操作）。您可以阅读有关HTML表单here

的更多信息

我需要解释JSX如何形成工作

2 个答案: