如何修改子组件的状态或将其发送给父组件(带功能组件)

Question

我在react中使用功能组件创建了我的前两个组件，(我不知道如何使用基于类的组件，但这不是重点(

我有逻辑问题，我不明白在这种情况下该怎么办。

1-(我不知道是否必须将子组件的完整状态发送给父组件任一

2. 从子组件修改父组件的状态

我的代码具有以下结构：

父组件：

RequirementCreate(它是一个视图或页面(包含以下字段：

• 需求的标题
• 说明

代码：

const RequirementCreate = function () {
const [requirement_state, setRequirement_state] = useState({
title: "",
description: "",
participants: [],
});
return (
<Content>
<Box>
<Title>
<IconTitle icon="icon" width="30" height="30" />
Requirement Create
</Title>
</Box>
<BoxContent>
<InputGroup inputLabel={"Titulo"} iconName={"ic:baseline-abc"} />
<br />
<Label>Description</Label>
<TextArea rows="10" />
<EmailTag /> <-- CHILD COMPONENT
<ButtonContainer>
<Button to="/dashboard/requirement">Add</Button>
</ButtonContainer>
</BoxContent>
</Content>
);
};
export default RequirementCreate;

子组件：

EmailTag(电子邮件阵列(

此组件检查如果它是一个有效的电子邮件地址，如果不是，它会重复。附言：这个组件工作完美，100%代码：

const EmailTag = function () {
const [email_state, setEmail_State] = useState({
input_value: "",
emails: ["[e-mail]", "[e-mail]", "[e-mail]"],
ErrorMessage: "",
});
const { emails, input_value, message } = email_state;
const handleChange = function (e) {
setEmail_State({ ...email_state, input_value: e.target.value });
};
const handleKeyDown = function (e) {
// logic Handle key Down...
};
const handleDelete = function (item) {
// logic handle delete here
};
const isInList = function (email) {
// check if the email address you are trying to enter is already added 
};
const isEmail = function (email) {
// check if it is an email address
};
return (
<>
<TagContainer>
<div>
{emails.map((item, index) => (
<TagItem key={index}>
{item}
<TagButton type="button" onClick={() => handleDelete(item)}>
<DeleteButton icon="icon1" />
</TagButton>
</TagItem>
))}
</div>
<Input
placeholder="Participants"
value={input_value}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<span>{ErrorMessage}</span>
</TagContainer>
</>
);
};
export default EmailTag;

Answer 1

在React中，当这种情况发生时，您通常希望维护父组件中的状态，并将其作为道具传递给子组件。

您还可以将函数作为道具传递到子组件中，并从子组件调用它。

所以类似于：

<EmailTag 
requirement_state={requirement_state} 
setRequirement_state={setRequirement_state} 
/>

然后在您的子组件中，您可以访问您的道具，例如：props.setRequirement_state(...)，它将调用父组件中的函数。

我建议你读一读。

Answer 2

父组件：

const RequirementCreate = function () {
const [requirement_state, setRequirement_state] = useState({
title: "",
description: "",
participants: [],
});
return (
<Content>
<Box>
<Title>
<IconTitle icon="icon" width="30" height="30" />
Requirement Create
</Title>
</Box>
<BoxContent>
<InputGroup inputLabel={"Titulo"} iconName={"ic:baseline-abc"} />
<br />
<Label>Description</Label>
<TextArea rows="10" />
<EmailTag 
requirement_state={requirement_state} 
setRequirement_state={setRequirement_state} 
/>
<ButtonContainer>
<Button to="/dashboard/requirement">Add</Button>
</ButtonContainer>
</BoxContent>
</Content>
);
};
export default RequirementCreate;

子组件将是这样的，作为一个例子，我正在从handleChange方法修改父状态，您可以根据需要创建一个单独的方法来修改父组件状态：

const EmailTag = function (props) {
const [email_state, setEmail_State] = useState({
input_value: "",
emails: ["[e-mail]", "[e-mail]", "[e-mail]"],
ErrorMessage: "",
});

const { emails, input_value, message } = email_state;
const handleChange = function (e) {
setEmail_State({ ...email_state, input_value: e.target.value });
props.setRequirement_state({    
title: "Anything as per your needs...",
description: "Anything as per your needs...",
participants: ["Anything as per your needs..."]})
};
const handleKeyDown = function (e) {
// logic Handle key Down...
};
const handleDelete = function (item) {
// logic handle delete here
};
const isInList = function (email) {
// check if the email address you are trying to enter is already added 
};

const isEmail = function (email) {
// check if it is an email address
};

return (
<>
<TagContainer>
<div>
{emails.map((item, index) => (
<TagItem key={index}>
{item}
<TagButton type="button" onClick={() => handleDelete(item)}>
<DeleteButton icon="icon1" />
</TagButton>
</TagItem>
))}
</div>
<Input
placeholder="Participants"
value={input_value}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<span>{ErrorMessage}</span>
</TagContainer>
</>
);
};
export default EmailTag;