如何仅在相关输入字段内显示文本？

Question

当用户选中该输入框的复选框时，我的输入框将被启用。然后我想在那个特定的输入框中输入，但是当我在一个特定的输入框中时，我的文本会显示在所有输入中。

import React, { useState } from "react";
//some imports related to checkbox

export default function componentA() {
  //input
  const [value, setValue] = useState("");
 

  //checkbox group
  const [checkedOptions, setCheckedOptions] = useState({});

  const onOSelect = (event) => {
  
    const item = event.target.name;
    const isChecked = event.target.checked;
   

    setCheckedOptions({
      ...checkedOptions,
      [item]: isChecked,
    });
  };

  //data
  const data = [
    { label: "Rock", name: "Rock" },
    { label: "rambo", name: "rambo" },
    { label: "phone", name: "phone" },
    ]

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div >
      <div>
        <Card>
          <Checkbox
            checkedOptions={checkedOptions}
            groupLabel="Checkbox group label"
            onChange={onOSelect}
            options={data}
          />
        </Card>
      </div>
      <Card >
        <div >
          {data.map((item, key) => (
            <div key={key.name} >
              <input
                label={item.name}
                name={item.name}
                onChange={handleChange}
                placeholder="Placeholder"
                isDisabled={!checkedOptions[item.name]}
                value={value}
              />
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

寻找解决方案，如何仅在相关输入字段中显示我输入的文本并在特定状态下获取该值。

Answer 1

您需要保存每个字段的状态，这样才能工作

const [value, setValue] = useState({});
   ....

 const handleChange = (event, fieldName) => {
    setValue(oldState => ({ ...oldState, [fieldName]: event.target.value}));
  };   
   ....
 
 <Input
  isRequired
  label={item.name}
  minLength={4}
  name={item.name}
  onChange={(e, item.name) => handleChange(e, item.name)}
  value={value[item.name]}
  ....
  />

不要忘记通过名称将输入指向对象中的值，感谢@andymccullough 指出