Javascript 如何从另一个组件设置/获取一个组件的值？

背景：

// imports...

function myFunctionA(props) {

  const handleSubmit = useCallback(() => {
    console.log(textOrSelectFields);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker />
      </Form>
    </>
  )
}

// imports...

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

我有一个组件（组件a），其中包括另一个组件（MyColorPicker）。我正在尝试从组件A设置/获取MyColorPicker的值

问题：

// imports...

function myFunctionA(props) {

  const handleSubmit = useCallback(() => {
    console.log(textOrSelectFields);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker />
      </Form>
    </>
  )
}

// imports...

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

我可以通过向MyColorPicker传递一个道具来设置背景色，就像这样：

但是，我希望能够动态更新背景（即，根据用户输入），而不是将背景编码到道具中。我还希望能够在组件A中的

handleSubmit

函数中获取当前背景色值

组件A代码：

// imports...

function myFunctionA(props) {

  const handleSubmit = useCallback(() => {
    console.log(textOrSelectFields);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker />
      </Form>
    </>
  )
}

// imports...

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

//导入。。。
功能myFunctionA（道具）{
const handleSubmit=useCallback（（）=>{
console.log（textOrSelectFields）；
});
返回(
)
}

myColor选择器代码：

// imports...

function myFunctionA(props) {

  const handleSubmit = useCallback(() => {
    console.log(textOrSelectFields);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker />
      </Form>
    </>
  )
}

// imports...

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

//导入。。。
类MyBlockPicker扩展React.Component{
状态={
背景：this.props.background，
};
handleChangeComplete=（颜色）=>{
控制台。日志（颜色）；
this.setState（{background:color.hex}）；
};
render（）{
返回(
);
}
}
导出默认MyBlockPicker；

---

你对如何继续下去有什么想法吗？谢谢

您可以将

setState

函数传递给子级。如果您使用的是类组件，则可以包装

setState

，这样子级只能访问有限数量的状态

i、 e

在MyFunction中

function myFunctionA(props) {

  const [selectedColor, setSelectedColor] = useState(null)

  const handleSubmit = useCallback(() => {
    console.log(textOrSelectFields);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker setSelectedColor/>
      </Form>
    </>
  )
}

功能MyFunction（道具）{
常量[selectedColor，setSelectedColor]=useState（null）
const handleSubmit=useCallback（（）=>{
console.log（textOrSelectFields）；
});
返回(
)
}

在MyColorPicker中

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
    this.props.setSelectedColor(color.hex)
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

类MyBlockPicker扩展React.Component{ 状态={ 背景：this.props.background， }; handleChangeComplete=（颜色）=>{ 控制台。日志（颜色）； this.setState（{background:color.hex}）； this.props.setSelectedColor（color.hex） }; render（）{ 返回( ); } } 导出默认MyBlockPicker；

---

顺便说一句，您正在混合类组件和功能组件，这将是一个痛苦的代码库增长…

感谢您的帮助！因此，要从handleSubmit函数输出值，我只需执行

console.log（selectedColor），对吗？还感谢您对混合组件类型的评论。如果你想触发一些操作（比如console.log），你有两个选择。首先，将
setSelectedColor
包装到函数中，并在该函数调用中执行控制台日志。第二，创建一个
useffect
钩子，在状态改变时监听
slectedColor
和console.log。对不起，我的意思是如何从
handleSubmit
函数中访问
MyColorPicker
的当前值？哦，
selectedColor
将在下次渲染后包含该值。（非常粗糙的）流程是
setState
->
呈现
->
状态现在已更新