Javascript 将输入值与React useState统一

我在一个表格中有这三个数量输入。（实际上，它可以更动态地添加，大约15个或更多。但是为了简化，我说了三个。）

我想在它们上面添加另一个输入，添加一个值并将它们设置为相同的值

| - | - | Quantity |
|---|---|----------|
| - | - |    3     | <--- This input will set the same value for inputs below
|---|---|----------|
| - | - |    3     |
| - | - |    3     |
| - | - |    3     |

|-|-|数量|
|---|---|----------|
|-|-| 3 |问题似乎来自所有具有相同
值
（
值
状态）的输入。这为您提供了一种一次更新所有值的简单方法，但正如您所看到的，不允许单独更新它们。它们可以更改的唯一方法是调用unify值中的
onChange
事件中的
setValue（）

要更正此问题，您希望每个值都具有单独的状态。这可以通过在state中存储一个值数组来实现，但为了简单起见，我只实现了额外的
useState
hook

export const Form = () => {
    const [unifyValue, setUnifyValue] = useState(0);
    const [firstValue, setFirstValue] = useState(0);
    const [secondValue, setSecondValue] = useState(0);
    const [thirdValue, setThirdValue] = useState(0);

    const handleUnifyValue = (e: any) => {
        setUnifyValue(e.target.value);
        setFirstValue(e.target.value);
        setSecondValue(e.target.value);
        setThirdValue(e.target.value);
    }
    const handleFirstValue = (e: any) => {
        setFirstValue(e.target.value);
    }
    const handleSecondValue = (e: any) => {
        setSecondValue(e.target.value);
    }
    const handleThirdValue = (e: any) => {
        setThirdValue(e.target.value);
    }

    return (
        <form>
            {/* Unify input to set the same value in inputs below */}
            <input value={unifyValue} onChange={handleUnifyValue} />

            {/* Without onChange, input will be set readOnly automatically, so I tried adding something */}
            <input value={firstValue} onChange={handleFirstValue} />
            <input value={secondValue} onChange={handleSecondValue} />
            <input value={thirdValue} onChange={handleThirdValue} />
        </form>
    )
}

export const Form=（）=>{
const[unifyValue，setUnifyValue]=useState（0）；
常量[firstValue，setFirstValue]=useState（0）；
常量[secondValue，setSecondValue]=使用状态（0）；
const[thirdValue，setThirdValue]=useState（0）；
常量handleUnifyValue=（e:any）=>{
setUnifyValue（即目标值）；
setFirstValue（即目标值）；
setSecondValue（如目标值）；
设置第三个值（即目标值）；
}
const handleFirstValue=（e:any）=>{
setFirstValue（即目标值）；
}
const handleSecondValue=（e:any）=>{
setSecondValue（如目标值）；
}
常量handleThirdValue=（e:any）=>{
设置第三个值（即目标值）；
}
返回(
{/*统一输入以在下面的输入中设置相同的值*/}
{/*如果没有onChange，输入将自动设置为只读，因此我尝试添加一些*/}
)
}

如果我能让状态数组很好地工作，我会用这个例子来更新它。这将允许3个以上的输入，还可以减少对如此多的
useState
和
handleXValue
行的需求。
问题似乎来自所有具有相同
值的输入（
值
状态）。这为您提供了一种一次更新所有值的简单方法，但正如您所看到的，不允许单独更新它们。它们可以更改的唯一方法是调用unify值中的
onChange
事件中的
setValue（）

要更正此问题，您希望每个值都具有单独的状态。这可以通过在state中存储一个值数组来实现，但为了简单起见，我只实现了额外的
useState
hook

export const Form = () => {
    const [unifyValue, setUnifyValue] = useState(0);
    const [firstValue, setFirstValue] = useState(0);
    const [secondValue, setSecondValue] = useState(0);
    const [thirdValue, setThirdValue] = useState(0);

    const handleUnifyValue = (e: any) => {
        setUnifyValue(e.target.value);
        setFirstValue(e.target.value);
        setSecondValue(e.target.value);
        setThirdValue(e.target.value);
    }
    const handleFirstValue = (e: any) => {
        setFirstValue(e.target.value);
    }
    const handleSecondValue = (e: any) => {
        setSecondValue(e.target.value);
    }
    const handleThirdValue = (e: any) => {
        setThirdValue(e.target.value);
    }

    return (
        <form>
            {/* Unify input to set the same value in inputs below */}
            <input value={unifyValue} onChange={handleUnifyValue} />

            {/* Without onChange, input will be set readOnly automatically, so I tried adding something */}
            <input value={firstValue} onChange={handleFirstValue} />
            <input value={secondValue} onChange={handleSecondValue} />
            <input value={thirdValue} onChange={handleThirdValue} />
        </form>
    )
}

export const Form=（）=>{
const[unifyValue，setUnifyValue]=useState（0）；
常量[firstValue，setFirstValue]=useState（0）；
常量[secondValue，setSecondValue]=使用状态（0）；
const[thirdValue，setThirdValue]=useState（0）；
常量handleUnifyValue=（e:any）=>{
setUnifyValue（即目标值）；
setFirstValue（即目标值）；
setSecondValue（如目标值）；
设置第三个值（即目标值）；
}
const handleFirstValue=（e:any）=>{
setFirstValue（即目标值）；
}
const handleSecondValue=（e:any）=>{
setSecondValue（如目标值）；
}
常量handleThirdValue=（e:any）=>{
设置第三个值（即目标值）；
}
返回(
{/*统一输入以在下面的输入中设置相同的值*/}
{/*如果没有onChange，输入将自动设置为只读，因此我尝试添加一些*/}
)
}

如果我能让状态数组很好地工作，我会用这个例子来更新它。这将允许3个以上的输入，还可以减少对如此多的
useState
和
handleXValue
行的需要。
您需要在两个单独的状态中存储统一值和rest值

const [valueAll, setValueAll] = useState(0)

const [value, setValue] = useState({
    input1: 0,
    input2: 0,
    input3: 0
})

const handleValue = (e: any) => {
    setValueAll(e.target.value)
    let newValue = value;
    Object.keys(newValue).forEach(key => {
      newValue[key] = e.target.value
    });
    setValue(newValue)
}

<input value={valueAll} onChange={handleValue} />
<input value={value.input1} name="input1" onChange={handleEachValue} />
<input value={value.input2} name="input2" onChange={handleEachValue} />
<input value={value.input3} name="input3" onChange={handleEachValue} />

const[valueAll，setValueAll]=useState（0）
const[value，setValue]=useState({
输入1:0，
输入2:0，
输入3:0
})
const handleValue=（e:any）=>{
setValueAll（如目标值）
让newValue=value；
Object.keys（newValue）.forEach（key=>{
newValue[key]=e.target.value
});
设置值（新值）
}

您可以在此处选中
您需要在两种不同的状态下存储unify值和rest值

const [valueAll, setValueAll] = useState(0)

const [value, setValue] = useState({
    input1: 0,
    input2: 0,
    input3: 0
})

const handleValue = (e: any) => {
    setValueAll(e.target.value)
    let newValue = value;
    Object.keys(newValue).forEach(key => {
      newValue[key] = e.target.value
    });
    setValue(newValue)
}

<input value={valueAll} onChange={handleValue} />
<input value={value.input1} name="input1" onChange={handleEachValue} />
<input value={value.input2} name="input2" onChange={handleEachValue} />
<input value={value.input3} name="input3" onChange={handleEachValue} />

const[valueAll，setValueAll]=useState（0）
const[value，setValue]=useState({
输入1:0，
输入2:0，
输入3:0
})
const handleValue=（e:any）=>{
setValueAll（如目标值）
让newValue=value；
Object.keys（newValue）.forEach（key=>{
newValue[key]=e.target.value
});
设置值（新值）
}

您可以在此处查看具有可自定义输入数量的解决方案：

const NUM_输入=3；
常量范围：字符串[]=（Array.from（Array（NUM_INPUTS）.keys（））.map（i=>“”））；
const[value，setValue]=使用状态（未定义）；
const[values，setValues]=使用状态（范围）；
//处理统一值
const handleValue=（e:any）=>{
设定值（即目标值）；
设置值（范围填充（即目标值））；
}
//处理单个输入
const handleOtherValue=（e:any）=>{
值[+e.target.name]=e.target.value；
设置值（值）；
}
//创建输入元素数组
常量输入=范围.map（（_，i）=>
());
//使用defaultValue以使输入可变很重要
返回(
{/*对于响应自动更新这些输入非常重要*/}
{inputs}
);
具有可定制输入数量的解决方案：

const NUM_输入=3；
常量范围：字符串[]=（Array.from（Array（NUM_INPUTS）.keys（））.map（i=>“”））；
const[value，setValue]=使用状态（未定义）；
常数