React对象的更新状态

Question

我想使用状态挂钩将app_id的值在handleChange期间更改为Hello。但是，在提交表单之前，我无法更新app_id的状态，也找不到更新app_id值的方法。

为了进一步澄清，app_id是一个下拉列表，有一个custom选项。当选择自定义选项时，我希望在提交表单之前从自定义文本框中选择app_id的值。为此，我试图将app_id中的先前值替换为custom_app_id (文本框)的值。

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import { useState , useEffect } from "react";
import { Container, Button, Form  } from "react-bootstrap";

function App() {
  const initialValues = { username:"" , email: "", password: "", account_id: "", app_id:"", custom_app_id:""};
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState({});
  const [isSubmit, setIsSubmit] = useState(false);
  const handleChange = (e) => {
    const { id, value } =e.target;
    if (document.getElementById("app_id").value != "custom"){
      document.getElementById("custom_app_id").disabled = true;
    }
    if (document.getElementById("app_id").value === "custom"){
      document.getElementById("custom_app_id").disabled = false;
      console.log(document.getElementById("app_id").value);
      // initialValues["app_id"] =  document.getElementById("custom_app_id").value;
      setFormValues(prevState => ({
        ...prevState,
        ["app_id"]: "Hello World"
    }));
    }
    setFormValues({ ...formValues, [id]: value });
    console.log(formValues);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setFormErrors((validate(formValues)));
    setIsSubmit(true);
  };
  useEffect(()=>{
    console.log(formErrors)
    if(Object.keys(formErrors).length === 0 && isSubmit){
      console.log(formValues);
    }
  }, [formErrors]);
  const validate = (values) => {
    const errors = {};
    var numcheck = /^[0-9\b]+$/;
    if( !values.username){
      errors.username = "Username is required"
    }
    if( !values.email){
      errors.email = "Email is required"
    }
    if( !values.password){
      errors.password = "Password is required"
    }
    if(  numcheck.test(values.account_id) === false ){
      errors.account_id = "Account ID should only have numbers and cannot be empty"
    }
    if( !values.app_id){
      errors.app_id = "App ID is required"
    }
    return errors;
  };



  return (
    <div style={{  display: "block", width: 1000, padding: 30 }}>
    <h4>Self Service UI - Version 2.0</h4>
    <pre> { JSON.stringify(formValues)}</pre>
    <Container>
    <Form onSubmit = {handleSubmit}>
      <Form.Group>
        <Form.Label>Username:</Form.Label>
        <Form.Control id="username" type="text" placeholder="Enter your username" value={formValues.username} onChange={handleChange} />
        <p style={{ color: 'red' }}>{formErrors.username}</p>
      </Form.Group>
      <Form.Group>
        <Form.Label>Enter your email address:</Form.Label>
        <Form.Control id="email" type="email" placeholder="Enter your your email address" value={formValues.email} onChange={handleChange} />
        <p style={{ color: 'red' }}>{formErrors.email}</p>
      </Form.Group>
      <Form.Group>
        <Form.Label>Enter your password:</Form.Label>
        <Form.Control id="password" type="password" placeholder="Enter your password" value={formValues.password} onChange={handleChange} />
        <p style={{ color: 'red' }}>{formErrors.password}</p>
      </Form.Group>
      <Form.Group>
            <Form.Label>account_id</Form.Label>
            <Form.Control
              id="account_id"
              type="text"
              placeholder="This is typically 9 digits"
              value={formValues.account_id}
              onChange={handleChange}
            />
             <p style={{ color: 'red' }}>{formErrors.account_id}</p>
      </Form.Group>

      <Form.Group>
            <Form.Label>app_id</Form.Label>
            <Form.Control
              as="select"
              className="custom-select"
              id="app_id"
              value={formValues.app_id}  
              onChange={handleChange}
             >
              <option value="" hidden>This is typically 3 characters.</option>
              <option value="cs">contentserv</option>
              <option value="ew">enterworks</option>
              <option value="ep">epcc</option>
              <option value="gms">gms</option>
              <option value="iu">internal-use</option>
              <option value="is">intershop</option>
              <option value="mag">magento</option>
              <option value="oc">oracle-commerce</option>
              <option value="stb">stibo</option>
              <option value="nat">natalie</option>
              <option value="custom">Custom/Others</option>
            </Form.Control>
            <p style={{ color: 'red' }}>{formErrors.app_id}</p>
      </Form.Group>

      <Form.Group>
            <Form.Label>custom_app_id</Form.Label>
            <Form.Control
              placeholder="This is typically 3 characters."
              id="custom_app_id"
              disabled="disabled"
              type="text"
              value={formValues.custom_app_id}
              onChange={handleChange}
            />
      </Form.Group> 
      <Button variant="primary" type="submit">
        Click here to submit form
      </Button>
    </Form>
    </Container>
  </div>
  );
}

export default App;

Answer 1

谢谢大家，我想出了一个解决方案，直接在formValues.app_id函数中为handleChange赋值。下面是我的更改(代码的其余部分与它相同)：

 const handleChange = (e) => {
    const { id, value } =e.target;
    if(id === "app_id" && value === "custom"){
      document.getElementById("custom_app_id").disabled = false;
    }
    if(id === "app_id" && value !== "custom"){
      document.getElementById("custom_app_id").disabled = true;
    }
    if(id === "custom_app_id" && value !== ""){
      formValues.app_id = document.getElementById("custom_app_id").value
      console.log(formValues.app_id);
    }
    setFormValues({ ...formValues, [id]: value });
    console.log(formValues);
  };