如何从 reactJS 的另一个模块中的文本字段中访问值

Question

我想访问 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>
  );
}

Answer 1

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

还有一种替代方式， Redux

您应该尝试将 redux 用于不直接相关的组件之间的共享 state（即兄弟组件或具有冗长的层次结构）。 For small applications, redux is overkilled so should be avoided.

Answer 2

这里想到的最有可能的选项是提升 state的概念，其中最近的祖先组件有一些方法可以跟踪 state，并将其传递给需要跟踪它的兄弟。 您可以通过允许在每次更改时调用onChangeCallback来使其成为模块的可选功能； 然后可以将此道具传递给setSharedState挂钩，该挂钩将在祖先上设置 state：

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>
  );
}

这只是一个粗略的例子。 自由传递 state 的其他选项将使用Redux或上下文 API ，但前者可能过度适合这种情况，而后者可能不适合特定的单一用途。

Answer 3

有可能的选项，但作为道具传递的正确选项

const modle1= () => {
    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>
  );
}

或者您可以使用创建上下文和使用上下文并提供要提供的父级和作为消费者的子级，但最好的选项作为道具传递

Answer 4

我建议你使用 react 的父子特性来处理这个问题。 由于我不确定其他模块和这个模块之间的关系，我将提供一个粗略的骨架。

在父组件中：

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

然后在您的子组件中：

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

如果他们是兄弟姐妹，我会使用父组件，然后将 state 传递给兄弟姐妹。 否则，酌情使用此父子关系来传递和更新 state。

高温高压