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

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

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

<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. 中找到代码，我也在这里粘贴基本的 code（Component Class） 。

class Leave(models.Model):

    leavedate = models.DateField()
    employee = models.ForeignKey(Employee)
    company = models.ForeignKey(Company)
    reason = models.IntegerField(default=0) 
    description = models.CharField(max_length=100)
    status = models.IntegerField(default=0)   

    approval_note = models.CharField(max_length=100)
    approved_by = models.ForeignKey(Employee)
    created_by = models.ForeignKey(Employee)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)


    def __str__(self):
        return self.employee.username

代码中存在的问题如下：- 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 />)}; ); } };设置状态直接不允许，因此我将代码转换为 this.state.inputValue = event.target.valueAsNumber
输入类型this.setState要求值格式类似于 “ 1990-11-02T12：59”将其替换为datetime-local
event.target.value不是规定的呼叫方式使用（）将Render内部组件类的功能与函数名称直接在页面加载时调用该函数不需要，因此将代码替换为 onChange="return handleChange()"
onChange={this.handleChange}将调用handleSubmit 组件加载后立即运行，这不是也采用规定的方式，因此将代码替换为 onSubmit="return handleSubmit();"
在onSubmit={this.handleSubmit}函数中，我们不需要再次将状态设置为只要输入值使用更改，它就已经更新 handleSubmit函数。因此，如果您愿意，可以在这里打电话父项使用 handleChange并使用输入更有价值。

对于任何其他查询，请随时通过connect.ronit@mail.com发表评论或给我发电子邮件

ReactJS：停止自动提交输入

3 个答案: