ReactJS：OnChange 处理程序在 onClick 之前自动提交数据答案

【问题标题】：ReactJS: OnChange handler auto submitting data before onClickReactJS：OnChange 处理程序在 onClick 之前自动提交数据
【发布时间】：2019-10-09 05:29:08
【问题描述】：

我对 React/Javascript 和使用它的功能还比较陌生。我创建了一个组件，它接受用户输入并呈现一个允许用户链接到外部 URL 的按钮。按钮标题由用户创建，然后添加 URL。

但是，当粘贴 url 或我开始输入它时，onChange 处理程序会自动创建按钮，而不使用 onSubmit 函数。因此，如果我开始输入粘贴 url（即使数据错误），onChange 事件会接受我输入的任何内容，而不允许我单击“先提交”。

我将按照本教程作为创建 onChange/onSubmit 函数的指南：https://www.youtube.com/watch?v=qH4pJISKeoI&t=304s。他的演示没有相同的问题，他的输入字段解决了不同的问题。

onChange & onSubmit 函数


    this.state = {
      links: [],
      url: '',
      title: ''
    }
  }

  onChange = (e) => {
    e.preventDefault(e)
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  // onSubmit

  onSubmit = e => {
    e.preventDefault(e)
  }

...

render() {
    if (this.state.url === '') {
      return (
        <>
          <form>
            <input
              name="title"
              type="text"
              placeholder="add button text"
              onChange={e => this.setState({ title: e.target.value })}
            />
            <input
              name="url"
              type="url"
              placholder="your-link.com"
              onClick={(e) => { e.stopPropagation() }}
              disabled={this.state.title === ''}
              onChange={e => this.setState({ url: e.target.value })}
            />
            <br />
          </form>
          <button onClick={this.onSubmit}>Submit</button>
        </>
      )
    } else {
      return (
        <>
          <div>
            <a href={this.state.url} target="_blank" rel="noopener noreferrer"><p>{this.state.title}</p></a>
          </div >
        </>
      )
    }
  }
}

我尝试使用 onChange={this.title} 和 {this.url} 分隔 onChange 事件，禁用 URL 字段直到添加标题，并在 url 输入字段中添加 onClick={(e) => { e.stopPropagation() }} 以防止自动提交，如上面的代码所示。

任何帮助了解导致此问题的原因将不胜感激。

【问题讨论】：

标签： reactjs

【解决方案1】：

让我们看看发生了什么：

我们在 url 的输入上有 onChange。
当此输入字段中的任何内容发生更改时，
调用更改并触发渲染方法。
在渲染中if (this.state.url === '') { 不再是true，因此它无需提交即可创建链接。

【讨论】：

【解决方案2】：

当你有参数时，防止默认值不起作用：

e.preventDefault(e)
// probably this may be a typo instead?
// it's preventing you to go further line due to error.

去掉e参数应该没问题：

e.preventDefault()

【讨论】：

【解决方案3】：

         <form onSubmit={this.onSubmit}>
          <input
            name="title"
            type="text"
            placeholder="add button text"
            onChange={e => this.onChange(e)}
          />
          <input
            name="url"
            type="url"
            placholder="your-link.com"
            disabled={this.state.title === ''}
            onChange={e => this.onChange(e)}
          />
          <br />
          <button type="submit">Submit</button>
        </form>

做这样的改变并检查

【讨论】：