时间戳

首页 > 解决方案 > ReactJS：条件渲染在handleSubmit函数之前提交表单数据

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

问题描述

我有一个表单，完成后会呈现一个带有表单数据的按钮。该表单有两个输入：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不是空字符串，但如果我尝试这些语句，则表单不会呈现。

标签： reactjs

解决方案

是的，你是对的，你的问题是，当你输入一些东西时，url状态不再为空，你必须验证它url是否有效才能提交表单，我已经用解决方案做了一个StackBlitz的问题，我希望这会有所帮助。

推荐阅读