React Hooks 从子组件获取 usestate 值到父组件？或者更好的方法来做到这一点？

Question

我正在使用反应钩子创建一个多 select 组件，它为每个 selection 生成滑块（使用 material-ui）。一旦用户制作了他们的 selection，我就会使用地图为每个 selection 生成一个单独的滑块。每个滑块组件都有自己的 useState 实例来跟踪滑块的值。我将 nodeid 作为键传递给组件，并希望为返回的每个滑块设置一个 [nodeid, valueFromSlider] 数组。例如：如果用户制造了 3 个 select 离子，然后调用 'update feedback scores' 按钮，则返回值应为 [[nodeid, valueFromSlider], [nodeid, valueFromSlider], [nodeid, valueFromSlider]].

我的父组件了解每个滑块状态的最佳方式是什么？有没有办法通过id调用组件？我应该使用表格还是什么？从 redux 切换后第一次真正使用 hooks。

这是我的代码，在此先感谢。

const NodeSlider = (props) => {
  const { node, nodeId } = props;
  const [value, setValue] = useState(5);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <div>
      <Typography id="discrete-slider" gutterBottom>
        {node.display_name}
      </Typography>
      <Slider
        step={1}
        marks
        min={-10}
        max={10}
        valueLabelDisplay="on"
        defaultValue={5}
        value={value}
        onChange={handleChange}
      />
    </div>
  );
}

const TunerSlider = (props) => {
  const { sliders } = props;
  const [feedbackArray, setFeedbackArray] = useState(null);
  console.log('sliders', sliders);
  const createFeedbackArray = () => {
    // FIGURE THIS OUT? use this to call setfeedback array with value from node slider? 
  };

  return (
    <div>
      {sliders.map((slider) => (
        <NodeSlider
          key={slider.node_id}
          node={slider}
          nodeId={slider.node_id}
        />
      ))}
      <Button
        variant="contained"
        color="primary"
        onClick={() => createFeedbackArray()}
      >
        Update Feedback Scores
      </Button>
    </div>
  );
};

const TunerSearch = ({ nodeData }) => {
  const [searchValues, setSearchValues] = useState(null);
  const [sliderValues, setSliderValues] = useState(null);

  const generateSlider = () => {
    setSliderValues(searchValues);
  };

  return (
    <div>
      <div>Tuner Search</div>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={nodeData}
        getOptionLabel={(option) => option.display_name}
        filterSelectedOptions
        onChange={(event, value) => setSearchValues(value)}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="select nodes"
            placeholder="add more nodes"
          />
        )}
      />
      <Button
        variant="contained"
        color="primary"
        onClick={() => generateSlider()}
      >
        Generate Node Sliders
      </Button>
      {sliderValues ? <TunerSlider sliders={sliderValues} /> : null}
    </div>
  );
};

export default TunerSearch;

Answer 1

最好的方法是将状态移至最高公共父级。然后你可以定义你的函数来跟踪你在父组件中的反馈，然后与子组件共享它们。

这是我将如何处理这个问题的示例：

React Hooks 从子组件获取 usestate 值到父组件？或者更好的方法来做到这一点？

React Hooks getting usestate value from child component into parent component? Or better way to do this?

reactjs

material-ui

react-context

react-hooks