Блог

Я новичок в reactjs, я пытаюсь создать два компонента с хуками, один из которых будет содержать sate, а другой будет своего рода презентационным компонентом, который будет использоваться для установки состояния.

Проблема: когда я пытаюсь присвоить значение состояния в качестве реквизита дочернему элементу и использую функцию 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>