Question

我有两个组成部分。当在组件A中有人单击按钮时，我想将输入字段集中在组件B中。

我正在使用Redux，在我的Redux商店中我保存dataInputFocus，每当设置为true时，我重新渲染我的组件＆amp;想要关注输入字段。但这不起作用：componentWillReceiveProps(nextProps)被调用，它也会进入if（我尝试了一些console.logs），但this.myInp.focus();无效。

// Import React
import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import {addData, setInputFocus} from '../actions/index'

// Create Search component class
class Data extends React.Component{

  constructor(props) {
    super(props);
    this.state = { value: ""};

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps){
      if(nextProps.applicationState.dataInputFocus) {
          this.myInp.focus();
      }

  }

  onFormSubmit(e) {
    e.preventDefault();
    this.setState({value: "" });
    this.props.addData(this.state.value, this.props.preferences.type);
  }
  handleInputChange(e) {
    this.setState({value: e.target.value })
  }


  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            placeholder="data"
            className="myInput"
            value={this.state.value}
            onChange={this.handleInputChange}
            ref={(ip) => this.myInp = ip}
          />

            <button>Add</button>



            <span>{this.props.applicationState.dataInputFocus? 'TRUE' : 'FALSE'}</span>
            {/*  I added this line in order to test whether this actually works, but also so that my component re-renders, since I would not actually use dataInputFocus anywhere other than in the conditional */}
        </form>

        <button onClick={() => {this.myInp.focus()}}>Focus Input</button>  {/* this however does(!) work */}
      </div>
    );
  }

}

// Export Search
function mapStateToProps (state) {
  return {
    data: state.data,
    preferences: state.preferences,
    applicationState: state.applicationState
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    addData: addData
  }, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Data);

这是接收道具并包含要聚焦的输入字段的组件。因为它进入componentWillReceiveProps并且因为我还检查了道具实际上正在改变它进入if条件，我认为这个组件有问题，而不是我的reducer / redux或者包含按钮的其他组件并调度操作。

Answer 1

我有一个原因是这一行（ref={(ip) => this.myInp = ip}）不起作用，因为组件是在componentWillReceiveProps之后呈现的，并且它无法找到//create a state variable or global variable var isFocus= false constructor(props) { super(props); this.state = { value: "" }; this.handleInputChange = this.handleInputChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } // change value componentWillReceiveProps(nextProps){ if(nextProps.applicationState.dataInputFocus) { isFocus= true } } //after getting reference from render function make it focus.. componentDidMount() { if(isFocus) this.myInp.focus(); }输入框的引用...所以请参阅我的想法如下..

{{1}}

干杯：）

Answer 2

当组件更新时，你应该使用componentDidUpdate来操作DOM，而不是使用componentWillReceiveProps（在重新渲染之前调用）

React / Redux：componentWillReceiveProps中的焦点输入字段无效

2 个答案: