Question

我有一个模态功能组件，该组件具有一个子类组件，用作表单输入。我的提交按钮位于模式中，但是我需要使用存储在孩子州的信息来使用我的函数提交查询。如何通过父项的“提交”按钮在子类组件中调用此函数？

父功能组件：

function AddGearModal() {
  const [open, setOpen] = React.useState(false);

  return (
    <Container>
      <Modal
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
        trigger={
          <Button icon>
            <Icon name="plus" />
          </Button>
        }
      >
        <Modal.Header>Add New Gear</Modal.Header>
        <Modal.Content>
          <AddGearForm />
        </Modal.Content>
        <Modal.Actions>
          <Button color="black" onClick={() => setOpen(false)}>
            Nope
          </Button>
          //this button should call handleSubmit() in child component
          <Button
            content="Add Gear"
            labelPosition="right"
            icon="checkmark"
            onClick={() => setOpen(false)}
            positive
          />
        </Modal.Actions>
      </Modal>
    </Container>
  );
}

子类组件：

class AddGearForm extends Component {
  state = {
    name: "",
    level: "1",
    available: "1",
  };

  handleSubmit = () => {
      //I want to call this from parent component
  };

  //any changes to form inputs will set their corresponding state
  handleChange = (e, { name, value }) => {
    this.setState({ [name]: value });
    console.log("State changed: ", name, value);
  };

  render() {
    const { name, level, available } = this.state;
    const levelOptions = [
      { key: "1", value: "1", text: "Film 1" },
      { key: "2", value: "2", text: "Film 2" },
      { key: "3", value: "3", text: "Film 3" },
      { key: "4", value: "4", text: "Film 4" },
    ];
    const availableOptions = [
      { key: "1", value: "1", text: "Yes" },
      { key: "0", value: "0", text: "No" },
    ];
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Field>
          <Form.Input
            label="Gear Name"
            placeholder="Name"
            name="name"
            value={name}
            onChange={this.handleChange}
          />
        </Form.Field>
        <Form.Group widths="equal">
          <Form.Field
            control={Select}
            name="level"
            value={level}
            options={levelOptions}
            onChange={this.handleChange}
          />
          <Form.Field
            control={Select}
            name="available"
            value={available}
            options={availableOptions}
            onChange={this.handleChange}
          />
        </Form.Group>
      </Form>
    );
  }
}

我尝试使用useReducer（）挂钩读取传递的分发内容，但是我很难理解它。

Answer 1

这被称为对父级的“提升状态”。 理想地，您不想将状态存储在两个位置，因此将状态作为道具传递给孩子可能比将状态存储在孩子那里更有意义。我给你一个简单的例子。

const Parent = () => {
    // store the state here
    const [state, setState] = useState(null)

    // handler that you pass into child and updates state
    const handleChange = (/* params */) => setState(/* set new value */) 
    
    // pass state & handler to child
    return <Child value={state} onChange={handleChange} />
}

// pass the value & handler to child
const Child = ({ value, onChange }) => {
    // pass the new value to the parent (lifting state)
    return <Form.Field onChange={onChange} />
}

使用父组件中的按钮来调用子组件中的函数

1 个答案: