ReactJS:停止自动提交输入

Question

从下拉日历中选择日期并设置时间后，系统会自动提交该值。但是，我想使用提交按钮来提交该值。根据研究，我认为“event.preventDefault();”声明应该可以防止这样的事情发生。另外，该值是否存储在 inputValue 中？如果是，我如何从日历类外部访问该值？

因此，再次明确一点，我想使用提交按钮提交该值。

class Calendar extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                inputValue: '',

            }
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }


        handleChange(event) {
            this.state.inputValue = event.target.valueAsNumber;
            console.log('Form value: ' + this.state.inputValue);
            event.preventDefault();
        }

        handleSubmit(event) {

            this.state.inputValue = event.target.valueAsNumber;
            console.log('Form value: ' + this.state.inputValue);
            event.preventDefault();
        }

        render() {
            return (
                <div className="Calendar">
                    <form onSubmit="return handleSubmit();">
                        <label>Date/Time</label>
                        <input type="datetime-local" value={this.state.inputValue} onChange={this.handleChange()} />
                        <input type="submit" value="Submit" />
                    </form>
                </div>
                 //{this.render(){return (<UserList />)};
            );
        }
    };
    export default Calendar;

Answer 1

这样做的原因是，当渲染组件时，以下行会导致 handleSubmit() 立即执行:

<form onSubmit="return handleSubmit();">

换句话说，当您的组件呈现时，它会在“绑定(bind)处理程序”到表单 onSubmit 事件时调用 handleSubmit()。

如果您按如下方式修改代码，这将阻止表单自动提交/执行，同时实现所需的表单提交行为:

<form onSubmit={(event) => this.handleSubmit(event)}>