React钩子：在不更改事件处理程序函数引用的情况下跨函数访问状态

Question

class SomeComponent extends React.Component{
    onChange(ev){
        this.setState({text: ev.currentValue.text});
    }
    transformText(){
        return this.state.text.toUpperCase();
    }
    render(){
        return (
            <input type="text" onChange={this.onChange} value={this.transformText()} />
        );
    }
}

null

现在，如果我使用钩子重写这个组件：

function onChange(setText, ev) {
    setText(ev.currentValue.text);
};

function transformText(text) {
    return text.toUpperCase();
};

function SomeComponent(props) {
    const [text, setText] = useState('');

    return (
        <input type="text" onChange={onChange} value={transformText()} />
    );
}

现在的问题是，我需要分别将text传递给transformtext和settext传递给onchange方法。我能想到的可能的解决方案是：

1. 在组件函数中定义函数，并使用闭包传递值。
2. 在组件函数中，将值绑定到方法，然后使用绑定的方法。

编辑：这不是useCallback在React中所做的重复吗？因为我试图找出如何实现类似于以前用类组件方式完成的效果，虽然UseCallback提供了一种实现方法，但对于可维护性问题来说，这并不理想。

Answer 1

这是您可以构建自己的钩子的地方（Dan Abramov敦促不要使用术语“自定义钩子”，因为它使创建自己的钩子比复制/粘贴逻辑更难/更高级）提取文本转换逻辑

简单地从穆罕默德的回答中“删除”下面评论的代码。

function SomeComponent(props) {
  // const [text, setText] = React.useState("");

  // const onChange = ev => {
  //   setText(ev.target.value);
  // };

  // function transformText(text) {
  //   return text.toUpperCase();
  // }

  const { onChange, text } = useTransformedText();

  return (
    <input type="text" onChange={React.useCallback(onChange)} value={text} />
  );
}

并将其粘贴到一个新函数中（按照惯例，前缀为“use*”）。命名要返回的状态&回调（根据您的情况，可以作为对象或数组）

function useTransformedText(textTransformer = text => text.toUpperCase()) {
  const [text, setText] = React.useState("");

  const onChange = ev => {
    setText(ev.target.value);
  };

  return { onChange, text: textTransformer(text) };
}

function UpperCaseInput(props) {
  const { onChange, text } = useTransformedText();

  return (
    <input type="text" onChange={React.useCallback(onChange)} value={text} />
  );
}

function LowerCaseInput(props) {
  const { onChange, text } = useTransformedText(text => text.toLowerCase());

  return (
    <input type="text" onChange={React.useCallback(onChange)} value={text} />
  );
}

function App() {
  return (
    <div className="App">
      To Upper case: <UpperCaseInput />
      <br />
      To Lower case: <LowerCaseInput />
    </div>
  );
}