在 React js 中有条件地设置数据切换属性

Question

I have a button ( type='submit' ) inside a form that has an attribute ( data-toggle='modal' ). onclick the button triggers the modal immediately. But I want to validate the form first and then trigger the modal if all input field is validated.

so what I've tried. Below is the simplified version of the form.

*

           <form onSubmit={this.handleSubmit}>
             <button
              data-toggle={this.state.validatedForm ? "modal" : ""}
              data-target="#request_search_submit_popup_door_to_door"
              type="submit"
              className="search-button"
            >
              <span>
                <i className="icofont-search-1"></i>
              </span>
            </button>
            </form>

here I am initializing the state as below

this.state={
    validatedForm:false
}

if all the input field is validated then only the handleSubmit method will be called. And in there I am changing the state to

handleSubmit =(event)=>{
   event.preventDefault()
   this.setState({validatedForm:true})
}

but for the first submit the button doesn't trigger the modal. I am assuming the data-toggle attribute is only checking the value of validatedForm once.Doesn't check the value of validatedForm again after the handleSubmit is called. How can I achieve the functionality without using jquery. and point to be noted if I click on the button twice it works fine.

Answer 1

render() {
  const conditionals = {};
  if (this.state.validatedForm === "modal") {
    conditionals['data-toggle'] = 'modal';
  }

  return <button data-target={"xxx"} { ...conditionals} />
}

Answer 2

I know it's not the cleanest solution. but I did a simple trick to get thing working for me. In handleSubmit method just click on the button again.

           <form onSubmit={this.handleSubmit}>
             <button
              id="form-submit-button"
              {...(this.state.validatedForm ?{'data-toggle': "modal"} : {})}
              data-target="#request_search_submit_popup_door_to_door"
              type="submit"
              className="search-button"
            >
              <span>
                <i className="icofont-search-1"></i>
              </span>
            </button>
           </form>


     handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ validatedForm: true }, () => {
          document.getElementById("form-submit-button").click();
        });
     }

In initial render this.state.validateFrom=false . so no data-toggle attribute is there on submit button. users clicks on the submit button if the form is not validated handleSubmit is not called. but if the form is validated handleSubmit method gets called. state is changed to validatedForm = true . Now data-toggle attribute is there on the submit button. just clicking on the button again triggered the modal for me.