Question

我是Reactjs的新手，我试图创建两个带有钩子的组件，其中一个将保持状态，而另一个将是表示性的组件，用于设置状态。

问题：当我尝试将状态值作为道具提供给孩子，并使用onClick函数将其设置为event.target.value时，我无法在字段中输入任何内容，我有多个具有多个状态的文件，一个每个输入字段的状态。我不确定为什么它不起作用。另外，我知道如果我只使用一个组件，并且在同一组件中具有状态，那么它将起作用，但是比起我，我将无法将状态与表示性组件分开。

 //componetone
    const [left_value, setLeft_value] =useState()
    const [right_value, setRight_value] =useState()
    const [operator, setOperator] =useState()
    

//componentTwo

 <div>
                    <TextField
                        label="Left Number"
                        type="number"
                        name={"left_value"}
                        InputLabelProps={{ shrink: true }}
                        variant="filled"
                        // onChange={(e) => setLeft_value(e.target.value)}
                        onChange={(e) => props.setLeft_value(e.target.value)}


                    />
                </div>
 <div>
                    <TextField
                        label="Right Number"
                        name={"comparison_operator"}
                        type="number"
                        InputLabelProps={{ shrink: true }}
                        variant="filled"
                        onChange={(e) => props.setOperator(e.target.value)}
                        // onChange={(e) => setRight_value(e.target.value)}
                    />
                </div>

 <div>
                    <TextField
                        label="Right Number"
                        name={"right_value"}
                        type="number"
                        InputLabelProps={{ shrink: true }}
                        variant="filled"
                        onChange={(e) => props.setRight_value(e.target.value)}
                        // onChange={(e) => setRight_value(e.target.value)}
                    />
                </div>

为输入字段提升状态后，无法在字段中输入任何内容

0 个答案: