Question

我是ReactJS的新手。如果这么简单，请原谅我。

我正在尝试将单选按钮组件（RadioButton.js）注入首页。使单选按钮出现在主页上。它像一个孩子。从RadioButton.js中可以看到，我有两个单选按钮。它们的值为buttonOne和buttonTwo。

我想要实现的是，当选择buttonOne时，我想显示<TablePage/>组件。否则，<StickyHeadTable />

RadioButton.js

export default function FormControlLabelPosition() {
  const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

RadioButton被注入首页。我如何从RadioButton.js获取值。这样我就可以使用条件了。

HomePage.js

  return (
    <div className="home-page">
      <RadioButton values={values} handleChange={handleChange}></RadioButton>
      {values.flight === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
    </div>
  );

Answer 1

RadioButton.js

export default function FormControlLabelPosition(props) {

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={props.value}
        onChange={props.handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

HomePage.js

const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);
  };
 return (
    <div className="home-page">
      <RadioButton values={values} handleChange={handleChange}></RadioButton>
      {values.flight === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
    </div>
  );

Answer 2

如果您想使用value组件中的RadioButton，则应将其创建为不受控制的表单组件，这意味着其value将来自其父级，在这种情况下， HomePage组件。

因此 RadioButton.js 为：

export default function RadioButton({ value, onChange }) {
  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={onChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

RadioButton.propTypes = {
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired
};

和 HomePage.js

    export default function HomePage() {
      const [value, setValue] = React.useState("buttonOne");

      const handleChange = event => {
        setValue(event.target.value);
      };

      return (
        <div className="home-page">
          <RadioButton value={value} onChange={handleChange}></RadioButton>
          {value === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
        </div>
      );
    }

Answer 3

在HomePage.js上，您可以根据单选按钮的值使用状态有条件地显示表。

我假定 RadioButton.js 组件在 HomePage.j s中作为组件被调用。

RadioButton.js

export default function FormControlLabelPosition(props) {
  const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);


>  //Send your radio button value to parent component i.e HomePage.js

    props.handleChange(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

HomePage.js


state = {
      radioButtonValue: '';
}

render () {
   return (
        <div className="home-page">
          <RadioButton handleChange={this.handleChange} />
          {this.state.radioButtonValue === "buttonOne" ?
                 <TablePage /> : <StickyHeadTable />}
       </div>
  );
}

handleChange = (radioButtonValue) => {
          this.setState({radioButtonValue});
}

上面的代码之一，我们将handleChange作为道具发送，并在单击单选按钮后立即更改状态，然后根据状态呈现表。

如何将子组件的状态传递给父组件？

3 个答案: