如何使用 Material UI 自动完成和反应挂钩为多个输入字段填充值

Question

Q1。我使用了 Autocomplete materialui 库，其中我创建了输入字段字段，该字段正在消耗一个对象，但在安慰值时我有未定义的值。

Q2。如果我为 Item Name 字段选择值，我如何为多个输入字段获取填充值，而其余输入字段，即 mrp、sellprice 等将从使用 Item Name 字段值的对象填充。（附图片）

Form img

const initialFValues = {
  id: 0,
  itemName: "",
  mrp: "",
  buyPrice: "",
  sellPrice: "",
  qty: "",
  manufactureId: "",
  manufactureDate: new Date(),
  expiryDate: new Date(),

};

export default function ItemForm(props) {
  const { addOrEdit, recordForEdit, invoiceId } = props;

  const validate = (fieldValues = values) => {
    let temp = { ...errors };
    if ("itemName" in fieldValues)
      temp.itemName = fieldValues.itemName ? "" : "This field is required.";
    if ("mrp" in fieldValues)
      temp.mrp = fieldValues.mrp.length > 1 ? "" : "Price is invalid.";
    if ("buyPrice" in fieldValues)
      temp.buyPrice =
        fieldValues.buyPrice.length > 1 ? "" : "Price is invalid.";
    if ("sellPrice" in fieldValues)
      temp.sellPrice =
        fieldValues.sellPrice.length > 1 ? "" : "Price is invalid.";
    if ("qty" in fieldValues)
      temp.qty = fieldValues.qty.length > 0 ? "" : "Qty is invalid.";
    if ("manufactureId" in fieldValues)
      temp.manufactureId =
        fieldValues.manufactureId.length !== 0 ? "" : "This field is required.";
    setErrors({
      ...temp,
    });

    if (fieldValues === values)
      return Object.values(temp).every((x) => x === "");
  };

  const {
    values,
    setValues,
    errors,
    setErrors,
    handleInputChange,
    resetForm,
  } = useForm(initialFValues, true, validate);

  const handleSubmit = (e) => {
    //  console.log("InvoiceId: " + invoiceId);
    e.preventDefault();
    if (validate()) {
      values.invoiceId = invoiceId;
      addOrEdit(values, resetForm);
    }
  };

  useEffect(() => {
    if (recordForEdit != null)
      setValues({
        ...recordForEdit,
      });
      values.itemName=itemName.name
  }, [recordForEdit, setValues]);
   

// consuming from useform
    const handleInputChange = e => {
        const { name, value } = e.target
        setValues({
            ...values,
            [name]: value
        })
        console.log(values.itemName)  // -> this value is undefined 
        if (validateOnChange)
            validate({ [name]: value })
    }
      
    

  return (
    <Form onSubmit={handleSubmit}>
      <Grid container>
        <Grid item xs={6}>
          <Autocomplete
            id="itemName"
            name="itemName"
            error={errors.itemName}
            [enter image description here][1]value={values.itemName=itemName.name}    -> this value is undefined 
            onChange={handleInputChange}
            options={itemName}
            getOptionLabel={(option) => option.name}
            style={{ width: 300 }}
            renderInput={(params) => (
              <TextField {...params} label="Item Name" variant="outlined" />
            )}
          />
          {/* <Controls.Input
            name="itemName"
            label="Item Name"
            value={values.itemName}
            onChange={handleInputChange}
            error={errors.itemName}
          /> */}
          <Controls.Input
            name="mrp"
            label="MRP"
            value={values.mrp}
            onChange={handleInputChange}
            error={errors.mrp}
          />
          <Controls.Input
            name="buyPrice"
            label="Buy Price"
            value={values.buyPrice}
            onChange={handleInputChange}
            error={errors.buyPrice}
          />
          <Controls.Input
            name="sellPrice"
            label="Sell Price"
            value={values.sellPrice}
            onChange={handleInputChange}
            error={errors.sellPrice}
          />
          <Controls.Input
            name="qty"
            label="Quantity"
            value={values.qty}
            onChange={handleInputChange}
            error={errors.qty}
          />
        </Grid>
        <Grid item xs={6}>
          <Controls.SelectCustom
            name="manufactureId"
            label="Manufacture Name"
            value={values.manufactureId}
            onChange={handleInputChange}
            options={itemService.getItemCollection()}
            error={errors.manufactureId}
          />
          <Controls.DatePicker
            name="manufactureDate"
            label="Date of Manufacture"
            autoOk={false}
            value={values.manufactureDate}
            onChange={handleInputChange}
          />
          <Controls.DatePicker
            name="expiryDate"
            label="Date of Expiry"
            value={values.expiryDate}
            onChange={handleInputChange}
          />

          <div>
            <Controls.Button type="submit" text="Submit" />
            <Controls.Button text="Reset" color="default" onClick={resetForm} />
          </div>
        </Grid>
      </Grid>
    </Form>
  );
}

Answer 1

您可以创建另一个“onChange”属性，然后执行如下操作：

let's say you did onChange={handleInputChangeForAutoComplete}

const handleInputChangeForAutoComplete = (e,v) => {
 if(v!==null)
        {
            var a =  itemName.filter(option => option.id===v.id);
            if(a.length!==0){
                setValues({
                    ...values,
                    itemName: v,
                    mrp: a[0].mrp,
                    buyPrice: a[0].buyPrice,
                    sellPrice: a[0].sellPrice,
                    qty:a[0].qty
                })
        }
}

如何使用 Material UI 自动完成和反应挂钩为多个输入字段填充值

How to populate values for multiple input field using Material UI Autocomplete and react hooks

reactjs

autocomplete

react-hooks

material-ui