In React how would I disable onSubmit call for some text fields and not others?-CodePudding

I have a component dataModal that has two text boxes, a searchable data table, and a submit button. The Name and Date text boxes need to be filled out manually, and the dataTable is a component that can be searched via it's own text boxes to narrow down what data needs to be entered.

The problem that I am facing is when searching the data table using the text input fields pressing enter causes the form to submit. This is likely happening because the data table is in the form that the submit button is in.

Is there a way to have the text fields in the dataTable not submit the form while retaining the ability to submit the form when pressing enter in the name or date form?

const dataModal = (props) => {

  const { data, save, close } = props;
  const [name, setName] = useState();
  const [date, setDate] = useState();

  const handleSubmit = (e) => {
    if (e) e.preventDefault();
    save(name, date); // DB Call from parent
    close(); // Closes the modal
  }

  return (
  <form onSubmit={handleSubmit}>
    <customInput 
      name="NameTextField"
      captureInput={(value) => {setName(value)}}
    /> // Custom text box component

    <customInput
      name="DateTextField"
      captureInput={(value) => {setDate(value)}}
    />  // Custom text box component

    <searchableDataTable
      name="SearchableDataTable"
      data=data
    /> // Data Table with customInputs build the same as above that are used for filtering the data table

    <Button type="submit" /> // Submission button
  </form> 
  )
}

Moving the data table below the form tabs works, but it causes "ugly" rendering in which the submit button is in the middle of the modal, and not at the bottom. This is the fallback solution if I'm unable to figure this out.

CodePudding user response：

let's assume you pick "Name" to be required (also assuming everything works in your custominput), you could try this:

const [buttonState, setButtonState] = useState();

const isValid = (value) => {
    // return true or false
}
...
<customInput 
    name="NameTextField"
    captureInput={(value) => {
        setName(value)
        setButtonState(isValid(value))
    }}
/>
...
<Button {buttonState ? disabled="disabled" : ""} />

Please note isherwood's comment also.