相关疑难解决方法(0)

我正在尝试实现一个非常简单的用例,一个UI功能,其中:

1. 有一个标签,里面有一些内容
2. 如果单击,则文本输入会将其替换为可用标签的内容
3. 用户可以编辑内容
4. 按下Enter键后,输入隐藏和标签将返回更新的内容

我终于可以得到所有正确的(事实上有一个MongoBD后端,redux等),而且我唯一不能做的事情(在谷歌上搜索完整的一天并阅读SOF类似帖子)是这样的:

当我的文字输入出现时,我无法将焦点转移到它!首先我累了这样:

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.word}</h3>
    </div>

但是autoFocus肯定不起作用(我"猜"因为表单被渲染,但是处于隐藏状态,使得autoFocus无用).

接下来我尝试了我的this.updateWor,我在google和SOF上找到了很多建议:

this.refs.updateTheWord.focus();

这些以及类似的建议都没有奏效.我也试图欺骗React只是为了看看我能做些什么!我使用真正的DOM:

    const x = document.getElementById(this.props.word._id);
    x.focus();

它也没用.我甚至无法理解的一件事是这样的建议: 将ref作为一种方法(我"猜测") 我甚至没有尝试过,因为我有这些组件的倍数,我需要ref进一步获得价值对于每个组件,我无法想象如果我的引用没有命名,我怎么能得到它的价值!

那么请你提出一个想法,帮助我理解,如果我没有使用Form(因为我需要一个输入框替换标签),当我的CSS(Bootstrap)类正在丢失时,如何设置它的焦点？隐藏'拜托？

如何将焦点设置在material-ui TextField组件上？

componentDidMount() {
    ReactDom.findDomNode(this.refs.myControl).focus()
}

我试过上面的代码,但它不起作用:(

我有遇到这样的问题,.focus()只有作品setTimeout,如果我把它拿出来,它停止工作.任何人都可以解释我是什么原因,可能我做错了,我该如何解决问题.

    componentDidMount() {
        React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
    }

与setTimeout一起工作的例子

componentDidMount() {
    setTimeout(() => {
        React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
    }, 1);
}

JXS

<input ref="titleInput" type="text" />

我已经按照这个例子React设置了渲染后的输入

渲染功能

render() {
        const {title, description, tagtext, siteName} = (this.state.selected !== undefined) ? this.state.selected : {};
        const hasContentChangedYet = this.hasContentChangedYet(title, description);

        return (
            <div>
                <h2 className={styles.formMainHeader}>Edit Meta-Data Form</h2>
                <table className={styles.formBlock}>
                    <tbody>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Tag
                        </td>
                        <td className={styles.inputFieldDisableContainer}>
                            {tagtext}
                        </td>
                    </tr>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Site
                        </td>
                        <td className={styles.inputFieldDisableContainer}>
                            {siteName}
                        </td>
                    </tr>
                    <tr>
                        <td className={styles.tagEditLabel}> …

在查看其他开发人员在使用Redux时处理输入焦点的方式时,我遇到了一些针对ReactJS组件的一般指导.然而,我担心的是focus()函数是必不可少的,我可以看到多个组件争夺焦点的奇怪行为.是否有一种处理焦点的redux方式？是否有人使用redux处理实用设置焦点并做出反应,如果有,你使用什么技术？

有关:

• 如何设置焦点在Elm中的元素？
• 在purescript-halogen中创建后自动聚焦输入元素
• https://github.com/cyclejs/cycle-core/issues/153

组件安装时，我尝试着眼于输入。输入组件是样式组件，因此我使用innerRef来获取对该元素的引用。但是，安装组件时，输入不会获得焦点。我检查了该节点是否实际上正在获取对DOM节点的引用。我的逻辑找不到任何问题。谢谢您的帮助。

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import styled, { keyframes } from 'styled-components';

const UrlInput = styled.input`
  width: 400px;
  height: 34px;
  background-color: white;
  display: inline-block;
  outline: none;
  padding-left: 10px;
  font: 400 14px 'Source Sans Pro', 'sans-serif';
  ::placeholder {
    color: rgb(100,100,100);
    font: 400 14px 'Source Sans Pro', 'sans-serif';
  }
`

class AddUrl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: ''
    }
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    const node = …

我有一个 ReactJS 组件，<textarea>里面有一个 HTML。

已预先填充<textarea>属性value（见下文...我正在生成一个链接供用户复制）。

我想自动选择<textarea>内容，这样用户复制文本会更方便。我正在尝试在 ReactcomponentDidMount调用中执行此操作。它有效......有点。

据我所知，该组件的安装速度非常缓慢，即使componentDidMount已经被调用，该过程仍在进行中。我这么说的原因是：如果我myTextarea.select()直接在内部调用componentDidMount，100% 都会失败。但是，如果我拨打.select()电话setTimeout(...)，让它在尝试选择内容之前稍等一下，那么它100% 都能正常工作。

编辑/注意：经过一番探索后，我发现一些观点表明，用于setTimeout(...)此目的的做法是不好的做法，所以现在我更加渴望避免使用它。

我可能会缺少什么，有没有更好的方法来实现这一点？

这就是我所拥有的。

这个版本失败了。

var GenerateLinkUi = React.createClass({
  componentDidMount: function() {
    document.getElementById('cyoag-generated-link-textarea').select();
  },
  render: function () {
    return (
      <div id='cyoag-generate-link-ui'>
        <textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} />
      </div>
    );
  }
});

这个版本成功了。

var GenerateLinkUi = React.createClass({
  componentDidMount: function() {
    setTimeout(function(){ …

在阅读了React set focus和React focus with timeout之后，我仍然有点困惑什么是设置focus输入的正确跨浏览器选项。

我遇到了条件渲染输入的问题，这些输入在渲染后可能具有焦点table，其中input放置在 中td。

1）使用componentDidUpdate的解决方案：

//...
componentDidUpdate() {
  this.input && this.input.focus();
}

render() {
  const show = this.state.isShown;

  return (
    <td className="editable">
      {!show ? (
        <input
          type="number"
          ref={(input) => { this.input = input }}
          value={this.state.value}
          onBlur={this.save}
          onKeyPress={e =>
            e.which === 13 || e.keyCode === 13 ? this.save() : null}
      />
    ) : (
        <span onClick={this.onTdClick}>{this.props.name}</span>
      )}
    </td>
  );
}

此解决方案适用于 Chrome、IE11、Edge，但不适用于最新的 Firefox（ …

I want to implement the TAB behavior, but with pressing ENTER.

Here is my attempt to solve it, but it doesn't work due to not using Refs.

My idea is to state in each input, which element should be focused next, and the Enter keyup event handler setting that value as the new focused field.

I've seen examples using useHook but I can't figure how to use it, without spamming a ton of useState's for each input.

Here …

以下是我的父组件，但是如何选择关注哪个输入？在这种情况下是否必须创建动态引用？

class TestRef extends React.Component {
  ref = React.createRef();
  state = {
    data: [
      {
        name: "abc"
      },
      { name: "def" }
    ]
  };
  focusInput = () => this.ref.current.focus();
  render() {
    return (
      <div>
        {this.state.data.map(o => {
          return <Hello placeholder={o.name} ref={this.ref} />;
        })}
        <button onClick={this.focusInput}>focus input 1</button>
        <button onClick={this.focusInput}>focus input 2</button>
      </div>
    );
  }
}

我有一个react-bootstrap带有<input>. 我想在<input>

以下工作正常，但在控制台中显示警告

<input type="text" autofocus='true' />

Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?

以下选项不起作用，因为它们在打开模态时不会聚焦输入：

<input type="text" autoFocus='true' />
<input type="text" autoFocus={true} />
<input type="text" autoFocus />

设置自动对焦的推荐方法是什么。或者我应该如何使运行良好的示例的警告静音？

注意：这是反应 16.8.6

我正在更新一个可以通过键盘访问的表单。表单底部有一个“下一页”按钮，可将用户导航到下一页。“下一步”按钮在导航期间不会重新呈现，只会更改表单内容。

当我单击后退按钮时，我运行一个 handleSubmit 函数：

<ButtonPrimary
  cypressTestId="sign-up-role-wizard-next-button"
  onClick={handleSubmit}
  text="NEXT"
/>

在其逻辑末尾附近运行handleSubmit一个函数：blur

    function handleSubmit() {
        const callback = ({ branch, rankType, role }) => {
            setRankType(rankType?.name);
            setUserInfo((prev) => ({
                ...prev,
                branchId: branch?.name,
                role: role?.name,
            }));
        };
        handleRoleWizardSubmit(callback);
        document.activeElement.blur();
    }

document.activeElement.blur()正在按预期工作，并在单击时从“下一步”按钮上移除焦点。但是，在下一个表单内容呈现后，单击选项卡会将焦点放在我的页脚上。焦点将转到页脚，因为“下一个”按钮是表单选项卡流中的最后一个元素。所以document.activeElement.blur()看起来它正在工作，因为聚焦环被移除，但选项卡顺序没有被重置。

我有一个 TextInput 组件，它只能在组件安装时编辑。当按下按钮时，它应该变得可编辑并自动聚焦。据我正确理解，该autoFocus属性仅在第一次安装时有效。有什么办法可以在状态改变时实现这一点吗？

import { FunctionComponent } from 'react';
import { View, TextInput, TextInputProps } from 'react-native';


interface InputTextBoxProps {
  editingState: boolean;
}

type InputProps = TextInputProps & InputTextBoxProps;

const InputTextBox: FunctionComponent<InputProps> = ({editingState, ...props}) => {
  return (
    <View>
      <TextInput
        {...props}
        multiline={true} 
        style={styles.textStyle}
        editable={editingState}
        autoFocus={editingState}
      >
      </TextInput>
    </View>
  );
};

我有两个按钮和两个文本框。当我单击按钮 1 时，它应该自动聚焦在文本框 1 上。当我单击按钮二时，它应该自动聚焦在文本框2上。

代码：

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  handleClick(){
    alert("hi");
  }
  render() {
    return (
      <div className="App">
        <div>
          <button onClick={this.handleClick}>One</button>
          <button onClick={this.handleClick}>Two</button>
        </div>
        <div>
          <input type="text" name="one" id="one" placeholder="one" /> 
        </div>
        <div>
          <input type="text" name="two" id="two" placeholder="two" /> 
        </div>
      </div>
    );
  }
}
export default App;

链接到codesandbox