当前位置: 首页 > 知识库问答 >
问题:

如何用react钩子构建不受控制的组件?

邵君植
2023-03-14

如何将这个不受控制的组件转换为react钩子(并避免输入字段的多重呈现):

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
  }

  render() {
    const {onInputChanged} = this.props;
    return (
      <form>
        <input type="text" ref={this.input} onChange={onInputChanged}/>
      </form>
    );
  }
}

共有1个答案

狄宪
2023-03-14

看看useref钩子:https://reactjs.org/docs/hooks-reference.html#useref

 类似资料:
  • 但我的问题是我如何强制上面的功能组件重新呈现立即与钩子?

  • 在视频中。js的官方文件https://docs.videojs.com/tutorial-react.html 我们有 我想创建具有钩子的功能组件 我有个警告 如果我将依赖数组从更改为在每个渲染上运行,我只是想在第一次运行它,就像 如何使用钩子准确地创建?

  • 当类组件的输入道具相同时,可以使用PureComponent或ShouldComponentUpdate来避免呈现。现在,您可以通过将函数组件包装在react.memo中来对它们进行同样的处理。 所期望的: 我希望只有当模态可见时才呈现模态(由this.props.show管理) 对于类组件: 如何在功能组件中使用?在modal.jsx中? 相关代码: 功能组件modal.jsx(我不知道如何检查

  • 提前谢了。我有一个状态数组,如下所示。 我需要添加一个项目到状态数组,我发现我们不需要做状态突变。如何使用PrevState设置状态。 如何调用set State以追加此状态数组。 像这样的东西?

  • 问题内容: ReactJS中什么是受控组件和非受控组件?它们之间有何不同? 问题答案: 这与有状态DOM组件(表单元素)有关,而React文档解释了区别: 甲控制的部件是一个,通过取其电流值和通过像回调通知变化。父组件通过处理回调并管理其自身的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。 一个不受控制的组件是一个存储其自己的内部状态,并且您使用查询DOM ,当你需要

  • 问题内容: 我有一个使用的组件,然后它的输出取决于上下文中的值。一个简单的例子: 当使用来自react和jest快照的浅色渲染器测试此组件时。如何更改值? 问题答案: 通常,使用钩子应该不会改变测试策略。实际上,这里更大的问题不是问题,而是上下文的使用,这使事情变得有些复杂。 有很多方法可以使这项工作,但是我发现唯一可以使用的方法是注入一个模拟钩子: 但是,这有点脏,并且是特定于实现的,因此,如果