How to use controlled and uncontrolled inputs in the same react form?-CodePudding

I have a form in which I do not need to track the changes in real time for part of the data and only need the final data. I want to know how to submit a controlled <select> and an uncontrolled <input> in the same form.

my code for states and handlers:

    const [ethValue, setEthValue] = useState("");
    const ethValueRef = useRef();
  
    const handleBet = (e) => {
      const newEthValue = ethValueRef.current.value;
      setEthValue(newEthValue);
      e.preventDefault();
    };

    const [formData, setFormData] = React.useState({
        userTeamChosen: "",
        eventNumber: 0,
    })
  
    function handleChange(event) {
        const { name, value, type, checked } = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }

my forms:

            <form onSubmit={handleBet}>
                    <select
                        onChange={handleChange}
                        name="userTeamChosen"
                        value={formData.userTeamChosen}>

                        <option>--choose---</option>
                        <option value={a}>{a}</option>
                        <option value={b}>{b}</option>
                        <option value={c}>{c}</option>
                    </select>

                    <input
                        type="number"
                        defaultValue={ethValue}
                        ref={ethValueRef}
                        name="value"
                    />
                    <button>Submit</button>
            </form>

How do I submit both forms?

CodePudding user response：

I would recommend not using refs in this case and instead going for a completely state based form. There were also some inconsistencies that are fixed now.

Your number input matches the name of your form and is being handled by your existing handleChange function.

        <input
          type="number"
          name="eventNumber"
          value={formData.eventNumber}
          onChange={handleChange}
        />

Additionally I've added a little debug submit function to your form:

  const submit = () => {
    alert(JSON.stringify(formData));
  };
...
      <form onSubmit={submit}>
...