我如何从reactJS另一个模块的文本字段中获取值

问题描述

我想访问reactjs另一个模块中textField的值。想要访问的模块不会导入整个文本字段，而只需要访问该值。在reactjs的另一个模块中访问value变量的最佳方法是什么？

这是我的功能性textField组件：

export default function textField(props) {

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

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

  return (
    <div>
      <TextField
        id="outlined-multiline-static"
        label="Frage"
        multiline
        onClick={handleClickOpen}
        rows={4}
        value={value}
        placeholder="hello"
        variant="outlined"
        style={{
          backgroundColor: "white",}}
      />
    </div>
  );
}

解决方法

这里想到的最可能的选择是lifting state的概念，在该概念中，最接近的祖先组件通过某种方式还可以跟踪状态，并将其传递给需要的同级跟踪它。您可以通过允许在每次更改时调用一个onChangeCallback属性来将此功能作为模块的可选功能。然后可以通过一个setSharedState钩子来传递此道具，该钩子将在祖先上设置状态：

const ParentComponent = () => {
    const [textfieldVal,setTextfieldVal] = useState();
    return (
        <TextField onChangeCallback={setTextFieldVal} />
    );
}

然后将模块更新为：

export default function textField(props) {

  const [value,setValue] = React.useState("");
  const {onChangeCallback} = props;

  const handleChange = (event) => {
    setValue(value);
    if (typeof onChangeCallback === 'function') {
      onChangeCallback(event); // or value,I'm not sure which you should be using here,this might be incorrect
    }
  };

  return (
    <div>
      <TextField
        id="outlined-multiline-static"
        label="Frage"
        multiline
        onClick={handleClickOpen}
        rows={4}
        value={value}
        placeholder="hello"
        variant="outlined"
        style={{
          backgroundColor: "white",}}
      />
    </div>
  );
}

这只是一个粗糙的例子。用于自由传递状态的其他选项将使用Redux或the Context API，但是前者在这种情况下可能会过大，而后者可能不太适合特定的一次性数据点。 / p>

每当textField的值更改时，您都可以发送onTextFieldChange函数作为道具，您可以将值传递给onTextFieldChange函数，并且可以在父组件中使用它。

还有另一种方法，Redux

您应该尝试将redux用于不直接相关的组件（即同级组件或层次结构较长）之间的共享状态。 For small applications,redux is overkilled so should be avoided.

有可能选项，但适当的选项作为道具

const modle1= () => {
    const [textfieldVal,setTextfieldVal] = useState();
    return (
        <TextField onChangeCallback={setTextFieldVal} />
    );
}

export default function textField(props) {

  const [value,}}
      />
    </div>
  );
}

或者您可以使用create context和use context并提供要提供的父项，而将子项作为消费者，但是最好的选择作为道具

我建议您使用react的父子特性来处理此问题。由于我不确定其他模块与该模块之间的关系，因此我将提供一个粗略的框架。

在父组件中：

export default function ParentComponent(){
  const [status,updateStatus] = useState("")
  
  return(
    <TextView updateParent={updateStatus}>
    
    </TextView>
  )
}

然后在您的子组件中：

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

如果它们是兄弟姐妹，我将使用父组件，然后将状态传递给兄弟姐妹。否则，请视情况使用此父子关系来传递和更新状态。

HTH

javascript reactjs reactjs use-state