ReactJS：条件渲染在handleSubmit函数之前提交表单数据答案

【问题标题】：ReactJS: Conditional rendering submits form data before handleSubmit functionReactJS：条件渲染在handleSubmit函数之前提交表单数据
【发布时间】：2019-10-09 09:36:47
【问题描述】：

我有一个表单，完成后会呈现一个带有表单数据的按钮。该表单接受两个输入：1. 标题（按钮中呈现的文本）和 2.) 按钮的 URL。

如果我粘贴 URL，该表单将与条件语句一起使用。但是，如果我开始手动输入 URL，它会根据我输入的第一个字符生成按钮，因为字符串不再为空。

export default class URLButton extends Component {
  constructor(props) {
    super(props)

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

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

  // onSubmit

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


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

由于 onChange 和 onSubmit 函数有效，我已将其缩小到条件语句 if (this.state.url === "") {... 我尝试将其设置为 null 和 false 而不是空字符串，但表单不呈现如果我尝试这些陈述。

【问题讨论】：

<form onClick={this.onSubmit}> 你是说onSubmit={this.onSubmit}吗？

标签： reactjs

【解决方案1】：

是的，您是对的，您的问题是，当您输入内容时，url 状态不再为空，您必须验证 url 是否有效才能提交表单，我已经发了StackBlitz 来解决这个问题，希望对你有帮助。

【讨论】：

嗨 Alberto，这个解决方案几乎可以工作，除非我在 url 中的句点后面输入第二个字母，它会停止输入并提交数据。示例：我正在输入 facebook.com，它在 facebook.c 处停止
@RHBlanchfield 我已经编辑了我的答案，以便您能够输入完整的 URL，但是您必须在这一行中设置要验证的字符数: '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{3,}|'+ // 域名跨度>
太好了，感谢您的帮助。我是 React/JS 的新手，我怀疑我能想出那个解决方案。
没问题，我很高兴它可以帮助你@RHBlanchfield :)

【解决方案2】：

如果您想完成输入并生成按钮您可以将 onChange 更改为 onBlur

<input
   name="url"
   type="url"
   placeholder="your-link.com"
   onBlur={e => this.setState({ url: e.target.value })}
/>

现在，当您输入并模糊输入时，将生成按钮

希望对你有帮助

【讨论】：

太棒了！这与 Alberto Perez 的 StackBlitz 一起解决了这个问题

【解决方案3】：

首先你应该将你的输入状态传递给输入：

...
<input
   name="url"
   type="url"
   value={this.state.url} // here
   placeholder="your-link.com"
   onChange={e => this.setState({ url: e.target.value })}
/>
...

通过此编辑，onChange 将传递给设置状态，不仅是您刚刚编写的字符，还包括所有以前的字符以及最后一个字符。

然后在此处查看您的代码：

...
if (this.state.url === "")
...

在 state.url 中的 FISRT 字符设置后它会是错误的。如果您需要检查正确的 URL，您应该在 if 条件下使用正则表达式，以检查 state.url 是否符合您的期望，并且仅在渲染组件的另一部分之后。

【讨论】：