Javascript 反应不'；t聚焦有条件呈现的输入/文本区域

我正在尝试

focus（）

React中有条件呈现的文本区域。下面的代码与or to中的示例几乎完全相同

下面的代码立即显示并聚焦文本区域。如果三个注释行未注释，则在

条件

属性设置为

true

（其值取决于父级的状态，最初为

false

），但元素不再聚焦后，会显示textarea

如果条件最初为

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

排除在执行

focus（）

时元素不可用

此外：

• 设置

  autoFocus

  属性似乎不起作用，与此相反

• 和

编辑：为了回答下面的问题，父组件如下所示

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

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
条件：假
}
this.toggleCondition=this.toggleCondition.bind（this）
}
切换条件（）{
this.setState（prevState=>({
条件：！prevState.condition
}))
}
render（）{
返回(
)
}
}

从“React”导入React，{Component}；
类TestClass扩展组件{
建造师（道具）{
超级（道具）；
this.focus=this.focus.bind（this）；
}
componentDidMount（）{
这是focus（）；
}
组件将接收道具（下一步）{
if（nextrops.condition！==此.props.condition）{
这是focus（）；
}
}
焦点（）{
log（`this.textInput:${this.textInput}`）；
if（this.props.condition===true）{
this.textInput.focus（）；
}
}
render（）{
返回(
{
这种情况&&
{this.textInput=input；}}
defaultValue=“提前感谢您宝贵的建议”
>
{console.log（'textarea rendered'）}
}
);
}
}
导出默认测试类；

原来这个问题真的很愚蠢。我实现切换按钮的方式（为了清晰起见，我在原始问题中简化为

）是使用一个自定义组件，该组件采用

onClick

属性，并将其值附加到超链接的

onMouseDown

属性

由于超链接在其

onMouseDown

操作后聚焦，因此焦点立即从文本区域移开

---

我编辑了这个问题，以反映我在mousedown上使用的

用法

如果你用

this.props.condition&&

替换更详细的

如果（this.props.condition）{}

在componentDidMount和componentDidUpdate中这样做会改变行为吗？不幸的是，在JavaScript中不会，

true&&expression

始终计算为

expression

，

false&&expression

始终计算为

false

。（来源：）您可以添加正在添加TestClass组件的父组件代码吗？我认为问题可能在于如何将“条件”作为道具传递，如果我使用

将其作为字符串传递，则它不起作用，但将条件作为布尔标志传递对我有效：

我猜问题在于条件最初为

false

。如果我最初将条件设置为

true

，它会工作。条件是一个布尔值，但我会在一分钟后发布父类。我已经在操场上测试了你的代码<代码>测试类按预期正确更新<代码>此。焦点在每次切换时执行。也许我做错了什么，没有回答问题。您能提供一些其他详细信息吗？谢谢，但当我尝试此操作时，

this.textInput

是

undefined

当调用

componentWillReceiveProps

时。如果this.textInput是未定义的，那么this.textInput.focus（）将不会触发。问题是：-）这是您所期望的。请检查源。我的解决方案中存在什么问题。问题在父组件中。但是，您的代码独立于父组件工作。我会投票表决的。

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

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;