如何使用两个连接的组件更改 React 中的变量 [重复]

Posted 2023-02-21

【中文标题】如何使用两个连接的组件更改 React 中的变量 [重复]

【英文标题】：How to change variables in React with two connected components [duplicate]

【发布时间】：2021-09-09 21:16:16

【问题描述】：

我目前正在使用 React 处理两个文件。 文件 A（上层组件）是用函数类型 React 编写的，并且 文件 B(Lower component) 是用 Class 类型 React 编写的，它们有共同的变量 X。

问题是如何使用文件 B 中的输入标签更改变量值的状态。

function A() 

  const [open,setOpen] = useState(false);
  const[value,setValue] = useState('');

  const onChange=e=>setValue(e.target.value);

  return (
          <B />
 


class B extends Component 
  
  render() 
    ;
    return (       
          <input
            value=this.state.keyword
          />

刚开始学习，希望有详细的解释和代码。 谢谢

【问题讨论】：

这能回答你的问题吗？ How can I update the parent's state in React?

【参考方案1】：

看看这个。

const A = () => 
  const [open,setOpen] = useState(false);
  const [value,setValue] = useState('');

  const onChange = e => setValue(e.target.value);

  return (
     <B onChange=onChange value=value/>
  )
 


class B extends Component 
  render() 
    return (       
      <input value=this.props.value onChange=this.props.onChange/>
    )