Javascript 将子组件单击处理程序绑定到父状态

其他答案都没有帮助，所以我想我在概念上遗漏了一些东西

我有一个父（包装器）组件和一个子（输入）组件。父级将函数向下传递给子级：

const Wrapper = () => {
  const [dictionary, setDictionary] = useState([{ word: "init", definition: "def init" }]);

  const handleWordChange = (e, value) => {
    e.preventDefault();

    /// IS NEVER TRIGGERED
  };

  return (
    <Input setDictionary={{ setDictionary }} onChange={handleWordChange} />
  )
}

const包装器=（）=>{
const[dictionary，setDictionary]=useState（[{word:“init”，definition:“definit”}]）；
常量HandleOrdChange=（e，值）=>{
e、 预防默认值（）；
///永远不会触发
};
返回(
)
}

子组件处理自己的状态，但应该通过调用setDictionary函数来更新父道具：

const Input = props => {
  const [definition, setDefinition] = useState("");
  const [word, setWord] = useState("");

  const handleSubmit = e => {
    const { setDictionary } = props.setDictionary;
    e.preventDefault();
    setDictionary([{ word, definition }]);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name='word'
        onChange={e => setWord(e.target.value)}
        onFocus={() => setWord("")}
        placeholder='Word'
        type='text'
        value={word}
      />

      <input
        name='definition'
        onChange={e => setDefinition(e.target.value)}
        onFocus={() => setDefinition("")}
        placeholder='Definition'
        type='text'
        value={definition}
      />
      <input type='submit' value='Submit' />
    </form>    
  )
}

const Input=props=>{
const[definition，setDefinition]=useState（“”）；
const[word，setWord]=useState（“”）；
常量handleSubmit=e=>{
const{setDictionary}=props.setDictionary；
e、 预防默认值（）；
setDictionary（[{word，definition}]）；
}
返回(
设置字（如target.value）}
onFocus={（）=>setWord（“”}
占位符class='Word'
type='text'
值={word}
/>
setDefinition（e.target.value）}
onFocus={（）=>setDefinition（“”}
占位符=“定义”
type='text'
值={definition}
/>
)
}

我看到的其他答案建议将回调传递给子级（setDictionary），但onChange处理程序从未在更改时被调用。我也试着用onSubmit代替

如何成功更新

词典

？

---

我知道上面的内容会造成子级对父级的依赖，考虑到我最终需要将

字典

传递给第二个子级，是否有更好的编程方法来实现这一点？

您甚至不会触发传递给组件的更改

  <Input setDictionary={{ setDictionary }} onChange={handleWordChange} />

//此组件中没有props.onChange
常量输入=道具=>{
const[definition，setDefinition]=useState（“”）；
const[word，setWord]=useState（“”）；
常量handleSubmit=e=>{
const{setDictionary}=props.setDictionary；
e、 预防默认值（）；
setDictionary（[{word，definition}]）；
//像这里
props.onChange（任何参数）；
}
返回(
{
设置字（如目标值）
props.onChange（）；
}}
onFocus={（）=>setWord（“”}
占位符class='Word'
type='text'
值={word}
/>
{
setDefinition（如目标值）
props.onChange（）；
}}
onFocus={（）=>setDefinition（“”}
占位符=“定义”
type='text'
值={definition}
/>
)
}

---

在输入组件中使用parent onChange（）方法时，如果不调用该方法，将触发该方法。我希望这会对您有所帮助。

您不能以这种方式分配子级的

onChange（）

事件处理程序

相反，您将子事件处理程序称为道具，并将父回调绑定到这些道具

这个概念被称为

您可以在下面找到您的用例的完整现场演示：

const{render}=reactidom，
{useState}=React
常量输入=（{onInput}）=>{
const[word，setWord]=useState（“”），
[definition，setDefinition]=useState（“”）
返回(
（e.preventDefault（），onInput（单词，定义））}>
字：
设置字（值）}/>
定义：
setDefinition（值）}/>
)
}
常量列表=（{List}）=>(

{
map（{word，definition}，key）=>{word}-{definition}）
}

)
常量父项=（）=>{
const[dictionary，setDictionary]=useState（[]），
OnDicinoAryItemSubmit=（单词，定义）=>setDictionary（[…字典，{word，定义}]））
返回(
)
}
渲染(
,
document.getElementById（'root'））
)

---

错误：-未在

中调用

onChange

函数，并在

中设置字典的状态
这是您查询的有效解决方案

const{useState}=React；
常量包装器=（）=>{
const[dictionary，setDictionary]=useState([
{单词：“计算机”，定义：“用于存储和处理数据的电子设备”}
]);
常量HandleOrdChange=（e，值）=>{
e、 预防默认值（）；
让updateDictionary=[…字典]；
updateDictionary.push（值）；
setDictionary（updateDictionary）；
//console.log（updateDictionary）；
///永远不会触发
};
返回(
{dictionary.length>0(
单词
定义
{dictionary.map（数据=>(
{datum.word}
{datum.definition}
))}
)：null}
);
};
常量输入=道具=>{
const[definition，setDefinition]=useState（“”）；
const[word，setWord]=useState（“”）；
常量handleSubmit=e=>{
e、 预防默认值（）；
（e，{word，definition}）；
};
返回(
设置字（如target.value）}
onFocus={（）=>setWord（“”}
占位符=“Word”
type=“text”
值={word}
/>
setDefinition（e.target.value）}
onFocus={（）=>setDefinition（“”}
占位符=“定义”
type=“text”
值={definition}
/>
);
};
ReactDOM.render（，document.getElementById（'root'））
表格，
th，
运输署{
边框：1px纯黑；
}
桌子{
边缘顶部：20px；
}

onChange={handleWordChange}
不是可选的吗？应通过
setDictionary（[{word，definition}]）
在子级中设置新字典状态，但父包装中的状态永远不会更新。我是否不需要在子级中设置父级状态，而只需要在HandleOrdChange函数的父级中进行设置
//there is no props.onChange here in this component

const Input = props => {
  const [definition, setDefinition] = useState("");
  const [word, setWord] = useState("");

  const handleSubmit = e => {
    const { setDictionary } = props.setDictionary;
    e.preventDefault();
    setDictionary([{ word, definition }]);
    //like here
    props.onChange(any arguments);

  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name='word'
        onChange={e => setWord(e.target.value)}
        onFocus={() => setWord("")}
        placeholder='Word'
        type='text'
        value={word}
      />

      <input
        name='definition'
        onChange={e => setDefinition(e.target.value)}
        onFocus={() => setDefinition("")}
        placeholder='Definition'
        type='text'
        value={definition}
      />
      <input type='submit' value='Submit' />
    </form>    
  )
}

 <Input setDictionary={{ setDictionary }} onInputChanged={handleWordChange} />

const handleSubmit = e => {
    const { setDictionary } = props.setDictionary;
    e.preventDefault();
    setDictionary([{ word, definition }]);
    //like here
    props.onInputChanged(any arguments);

  }

//there is not props.onChange here in this component

const Input = props => {
  const [definition, setDefinition] = useState("");
  const [word, setWord] = useState("");

  const handleSubmit = e => {
    const { setDictionary } = props.setDictionary;
    e.preventDefault();
    setDictionary([{ word, definition }]);
    //like here
    props.onChange(any arguments);

  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name='word'
        onChange={e => {
          setWord(e.target.value)
         props.onChange();
        }}
        onFocus={() => setWord("")}
        placeholder='Word'
        type='text'
        value={word}
      />

      <input
        name='definition'
        onChange={e => {
    setDefinition(e.target.value)
              props.onChange();
    }}
        onFocus={() => setDefinition("")}
        placeholder='Definition'
        type='text'
        value={definition}
      />
      <input type='submit' value='Submit' />
    </form>    
  )
}