React 不关注条件渲染 input/textarea

Question

我正在尝试 focus() 在 React 中有条件地呈现文本区域。下面的代码与 React docs or to .

中的示例几乎完全相同

下面的代码立即显示并聚焦文本区域。如果三个注释行未注释，则在 condition 属性设置为 true 后显示文本区域（其值取决于父级的状态，最初为 false），但是元素不再聚焦。

如果条件最初是 true，输入元素会在组件第一次呈现时按预期获得焦点。当条件从 false 更改为 true 时出现问题。

import React, { Component } from 'react'

class TestClass extends Component {
  constructor(props) {
    super(props)
    this.focus = this.focus.bind(this)
  }
  componentDidMount() {
    // this.props.condition &&
    this.focus()
  }
  componentDidUpdate() {
    // this.props.condition &&
    this.focus()
  }

  focus() {
    console.log(`this.textInput: ${this.textInput}`)
    this.textInput.focus()
  }

  render() {
    return (
      <div>
        {
          // this.props.condition &&
          <textarea
            ref={(input) => {this.textInput = input}}
            defaultValue="Thanks in advance for your invaluable advice">
            {console.log('textarea rendered')}
          </textarea>
        }
      </div>
    )
  }
}

控制台输出

textarea rendered
this.textInput: [object HTMLTextAreaElement]

排除元素在 focus() 执行时不可用。

此外：

与 this question

autoFocus

<input /> 和 <textarea />

编辑：针对下面的问题，父组件如下所示。

class ParentComponent extends Component {
  constructor(props) {
  super(props)
    this.state = {
      condition: false
    }
    this.toggleCondition = this.toggleCondition.bind(this)
  }
  toggleCondition() {
    this.setState(prevState => ({
      condition: !prevState.condition
    }))
  }
  render() {
    return (
      <div>
        <TestClass condition={this.state.condition} />
        <button onMouseDown={this.toggleCondition} />
      </div>
    )
  }
}

Answer 1

import React, { Component } from 'react';

class TestClass extends Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  componentDidMount() {
    this.focus();
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.condition !== this.props.condition) {
        this.focus();  
    }
  }
  focus() {
    console.log(`this.textInput: ${this.textInput}`);
    if (this.props.condition === true) {
      this.textInput.focus();
    }
  }

  render() {
    return (
      <div>
        {
          this.props.condition &&
          <textarea
            ref={(input) => { this.textInput = input; }}
            defaultValue="Thanks in advance for your invaluable advice"
          >
            {console.log('textarea rendered')}
          </textarea>
        }
      </div>
    );
  }
}
export default TestClass;

Answer 2

原来这个问题真的很愚蠢。我实现切换按钮的方式（我在原始问题 "for clarity" 中将其简化为 <button onClick={this.toggleCondition} />）是使用自定义组件，该组件采用 onClick 属性并将其值附加到 onMouseDown 超链接的属性。

因为超链接在其 onMouseDown 操作后获得焦点，焦点立即从文本区域移开。

我编辑了问题以反映我对 onMouseDown 的用法。

React 不关注条件渲染 input/textarea

React doesn't focus conditionally rendered input/textarea

javascript

textarea

focus

reactjs