使用 useState 将来自 class 组件的信息共享到 function 组件

Question

//parent
const [mailArray, setMailArray] = useState([]);

 return (
          <StyledInputBox>
            <Chips setMailArray={setMailArray} />  //does not work
          </StyledInputBox>
          )
          
//children <<Chips>>
export default class Chips extends React.Component {
  state = {
    items: [''],
    value: '',
    error: null,
  };
}          

class 组件 <> 是 function 组件的子组件。 我想从儿童的 state 中获取信息到具有 props 和 useState 的父级。

Answer 1

您应该更改父组件中的 mailArray 并将其传递给您的子组件。 或者，如果您想更改子组件中的 mailArray，您应该将 function 传递给 Chips 组件，该组件提供一个参数，当您单击 Chips 组件中的元素时会触发该参数，如下所示：

const changeMail = (value) => {
setMailArray(value)
}
 return (
          <StyledInputBox>
            <Chips onChange={changeMail} />  //does not work
          </StyledInputBox>
          )

并且在您的 Chips 组件中应该是例如下面的一些代码：

render() {
return (<div onClick={this.props.onChange('some value')}>chips component</div>)
}