Question

我之前在这里问了一个问题，但我想我应该更具体一些。假设我有两个组件，我从更高阶的组件调用：

所以我的高阶组件，包含这些组件，看起来像这样（或者至少是它的渲染方法）：

<div>
  <Navigation />
  <View />
</div>

现在，Navigation />包含一个按钮。只要单击该按钮，我就想将焦点设置在输入字段上，该字段位于<View />。

如果两件事都在同一个组件中，我就知道我会做这样的事情：

<button onClick={() => {this.myInp.focus()}}>Focus Input</button>
<input type="text" ref={(ip) => this.myInp = ip} />

顺便说一下，我正在使用Redux，如果这应该有所作为。

Answer 1

由于它们是同一元素的后代，因此您可以使用state元素和函数更改父state中的div元素，并将props传递给View Navigation和constructor(){ super() this.state = { inputFocus:false; } this.setInputFocus = this.setInputFocus.bind(this) } setInputFocus(value){ this.setState({inputFocus:false}); }。

render

然后在div的props方法中将它们传递为<div> <Navigation setInputFocus={this.setInputFocus}/> <View inputFocus={this.state.inputFocus}/> </div>

Navigation

在<button onClick={() => {this.props.setInputFocus(true)}}>Focus Input</button>

中

View

和<input type="text" ref={(ip) => this.myInp = ip}/>

componentWillReceiveProps

并在props中设置此内容，以检测componentWillReceiveProps(nextProps){ if(nextProps.inputFocus) this.myInp.focus() }何时更改并运行操作。

inputFocus

因此，当父级componentWillReceiveProps发生更改时，它会触发View元素中的focus和input import numpy as np data = np.random.rand(100,3) centers = np.random.rand(20,3) distances = np.sqrt(np.sum(np.power(data[:,None,:] - centers[None,:,:], 2), axis=-1)) print distances.shape # 100, 20。

Answer 2

除了引用之外，这个问题还涉及孩子到父母和父母与子女的互动。

所以我在下面的代码片段中做的是组件导航组件，我必须调用父组件，因为组件不能直接访问其兄弟组件。从父级可以通过refs访问子组件，然后您还可以访问子组件中定义的引用

请参阅下面的代码段

＆＃13;

class App extends React.Component {
  focusInput = () => {
      this.myView.myInput.focus()
  }
  render() {
    
    return (
      <div>
         <Navigation focusInput={this.focusInput}/>
          <View ref={(view) => {this.myView = view}}/>
       </div>
    )
  }
}


class Navigation extends React.Component {
  render() {
    return (
        <button onClick={() => this.props.focusInput()}>Focus</button>
    ) 
  }
}
class View extends React.Component {
  render() {
    return (
        <input type="text" ref={(ip) => this.myInput = ip}/>
    ) 
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

如果您想在多个不同的输入中聚焦导航中的多个按钮，您可以通过以下方式进行操作

＆＃13;

class App extends React.Component {
  focusInput = (ip) => {
      this.myView[ip].focus()
  }
  render() {
    
    return (
      <div>
         <Navigation focusInput={(val) => this.focusInput(val)}/>
          <View ref={(view) => {this.myView = view}}/>
       </div>
    )
  }
}


class Navigation extends React.Component {
  render() {
    return (
        <div>
          <button onClick={() => this.props.focusInput("myInput1")}>Focus1</button>
          <button onClick={() => this.props.focusInput("myInput2")}>Focus2</button>
        </div>
    ) 
  }
}
class View extends React.Component {
  render() {
    return (
        <div>
          <input type="text" ref={(ip) => this.myInput1 = ip}/>
          <input type="text" ref={(ip) => this.myInput2 = ip}/>
        </div>
    ) 
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

React / Redux - 通过单击组件2中的按钮

2 个答案: