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

Question

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

这是我的功能性文本字段组件：

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

这里最有可能想到的选项是 lifting state 的概念，其中最近的祖先组件也有一些方法可以跟踪状态，并将其传递给兄弟组件需要跟踪它。您可以通过允许在每次更改时调用 onChangeCallback 道具来使它成为模块的可选功能；这个 prop 然后可以通过一个 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 or the Context API，但前者对于这种情况可能有点矫枉过正，而后者可能不太适合特定的 single-use 数据点。

Answer 2

我建议您使用 parent-child 反应的性质来处理这个问题。由于不确定其他模块与本模块之间的关系，我将提供一个粗略的框架。

在父组件中：

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

然后在你的子组件中：

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

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

HTH

Answer 3

只要 textField 的值发生变化，您就可以将 onTextFieldChange 函数作为道具发送给 onTextFieldChange 函数，您可以在父组件中使用它。

还有一个替代方法，Redux

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

Answer 4

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

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

或者您可以使用 create context 和 use context 并提供父级来提供，子级作为消费者，但最好的选择是作为道具传递

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

How can I acess value from textfield in another module in reactJS

javascript

reactjs

use-state