ReactJS:OnChange处理程序在onClick之前自动提交数据_Reactjs

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

reactjs

ReactJS:OnChange处理程序在onClick之前自动提交数据,reactjs,Reactjs,我对React/Javascript还是比较新的&使用它的函数。我创建了一个组件，它接受用户输入并呈现一个按钮，允许用户链接到外部URL。按钮标题由用户创建，然后添加URL 但是，当粘贴url或我开始键入url时，onChange处理程序会自动创建按钮，而不使用onSubmit函数。因此，如果我开始键入粘贴url（即使数据是错误的），onChange事件将接受我输入的任何内容，而不允许我单击“先提交” 我遵循本教程作为创建onChange/onSubmit函数的指南：。他的演示没有相同的问题，

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

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

我遵循本教程作为创建onChange/onSubmit函数的指南：。他的演示没有相同的问题，他的输入字段解决了不同的问题

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 >
        </>
      )
    }
  }
}


此.state={
链接：[]，
url:“”，
标题：“”
}
}
onChange=（e）=>{
e、 防止违约（e）
这是我的国家({
[e.target.name]：e.target.value
})
}
//提交
onSubmit=e=>{
e、 防止违约（e）
}
...
render（）{
如果（this.state.url==''）{
返回(
this.setState（{title:e.target.value}）}
/>
{e.stopPropagation（）}
已禁用={this.state.title==''}
onChange={e=>this.setState（{url:e.target.value}）}
/>


提交
)
}否则{
返回(
)
}
}
}

我尝试使用

onChange={this.title}

和

{this.url}

分离onChange事件，禁用url字段直到添加标题，并在url输入字段中添加

onClick={（e）=>{e.stopPropagation（）}

，以防止自动发送，如上面的代码所示

如果您能帮助您了解导致此问题的原因，我们将不胜感激。


         <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>

这个.onChange（e）}
/>
这个.onChange（e）}
/>


提交

执行类似的更改并选中


这个.onChange（e）}
/>
这个.onChange（e）}
/>


提交

执行这样的更改并检查

让我们检查发生了什么：

我们使用

url

对输入进行了更改

当此输入字段中的任何内容发生更改时

在更改时调用，并触发render方法

在render

if（this.state.url==''）{

中，这不再是

true

，因此它创建链接而无需提交

让我们看看发生了什么：