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();">

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

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

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

Answer 2

最后我发现了问题，表单是自动提交的，因为你给了 value 属性作为 state.inputValue，这不是必需的。 onChange 属性也不是必需的。请尝试以下代码

class Calender extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    event.preventDefault();
    this.setState({ inputValue: document.getElementById("time").value });
  }
  render() {
    console.log(this.state.inputValue);
    return (
      <div className="Calendar">
        <form onSubmit={this.handleSubmit}>
          <label>Date/Time</label>
          <input type="datetime-local" id="time" />
          <input type="submit" value="Submit" />
        </form>
      </div>
      //{this.render(){return (<UserList />)};
    );
  }
}

另外请注意，设置后可能无法立即获取状态值。工作示例为here

Answer 3

我尝试使用您提供的代码创建一个测试应用，因此分析代码，我发现代码中有很多问题。

我已经编写了另一个版本的代码，删除了错误或错误。在 JSFiddle. 找到代码，我也在此处粘贴基本的代码（组件类）。

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.setState({
        "inputValue":event.target.value
    });
  }

    handleSubmit(event) {
    console.log("Input Value:",this.state.inputValue)
  }

  render() {
    return (
      <div className="Calendar">
        <form onSubmit={this.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 />)};
    );
  }
};

1. 代码中存在的问题如下：- this.state.inputValue = event.target.valueAsNumber 设置 不允许直接状态，因此我将代码转换为 this.setState
2. 输入类型datetime-local 期望值格式类似于 "1990-11-02T12:59" 所以将其替换为 event.target.value
3. onChange="return handleChange()" 不是规定的调用方式 渲染内部组件类的函数，使用 () 和 函数名直接调用我们加载的页面上的函数 不想要，因此将代码替换为 onChange={this.handleChange}
4. onSubmit="return handleSubmit();" 会调用handleSubmit 组件加载后立即运行，这不是 也规定了方式，因此将代码替换为 onSubmit={this.handleSubmit}
5. 在handleSubmit函数中我们不需要再次设置状态为 每当输入的值使用更改时，它就已经更新了 handleChange 函数。因此，如果您愿意，可以在这里致电 父母的任何功能使用 this.props.parentFunc(this.state.inputValue) 并使用输入 更有价值。

如有任何进一步的疑问，请随时发表评论或发送电子邮件至 connect.ronit@mail.com