3 回答
TA贡献1936条经验 获得超6个赞
在 React 中使用钩子更改子组件的父组件状态
子组件保存输入字段,我们将把输入字段值发送到父组件。因此,让我们先创建父组件。
父.js
import Child from "./Child";
function Parent() {
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const onChangeName=(newValue)=>{
setName(newValue);
}
const onChangePassword=(value)=>{
setPassword(value);
}
// We pass a callback to Child
return (
<Child onChangeName={onChangeName} onChangePassword={onChangePassword} />;
)}
如您所见,我们将 onChange 属性设置为子组件。下一步是创建子组件。
儿童.js
function Child(props) {
return(
<input onChange={(e)=>{props.onChangeName(e.target.value)}} />
<input onChange={(e)=>{props.onChangePassword(e.target.value)}} />
)}
在上面的代码中,我们创建了函数句柄更改,该函数将值通过 props.onChange 传递到我们的父组件。
TA贡献1884条经验 获得超4个赞
为此,您必须按如下方式实现它。
父母:
<Inputs
hasInputs={hasInputs}
onSubmit={this.handleSubmit}
thoughtProp={this.state.thought}
onChange={(event, index) => this.handleChange(event, index)}
/>;
孩子:
import React from 'react';
import { Input } from '../Input.js';
export const Inputs = (props) => {
return (
<form className="flex-item-main form" onSubmit={props.onSubmit}>
<ol>
{props.thoughtProp.map((input, index) => (
<Input
type="text"
onSubmit={props.onSubmit}
key={index}
value={input}
onChange={(event, index) => props.onChange(event, index)}
className="textInputs"
/>
))}
{props.hasInputs ? (
<input
className="submitThoughts"
type="submit"
value="Submit Thought!"
/>
) : null}
</ol>
</form>
);
};
TA贡献1880条经验 获得超4个赞
句柄更改函数在哪里?在输入组件中,在 “组件旁边,应包含 .onSubmit={props.onSubmit}
onChange={props.onChange}
添加回答
举报