React/Redux - 通过点击组件2中的按钮来关注组件1的输入字段
我在前面提出了一个问题，但我想我应该更具体。说我有两个组成部分，这是我从一个高阶组件调用：React/Redux - 通过点击组件2中的按钮来关注组件1的输入字段
所以我更高阶成分，含有这些成分，看起来是这样的（或至少它的渲染方法）：
<div>
<Navigation />
<View />
</div>
现在， Navigation />包含一个按钮。每当点击该按钮时，我想将焦点设置在<View />的输入字段上。
如果两个东西都在同样的分量，我才知道，我会做这样的事情：
<button onClick={() => {this.myInp.focus()}}>Focus Input</button>
<input type="text" ref={(ip) => this.myInp = ip} />
我使用终极版的方式，这是否应该有所作为。
因为它们是同一元素的后代，你可以使用一个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方法
然后，只需将它们传递下来作为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变化母公司将火在View元素componentWillReceiveProps和focus的input。
伴随着裁判，这个问题还涉及到孩子对父母和父母与孩子的互动。
所以我在下面的代码片段中做的是导航组件，我必须调用父组件，因为组件不能直接访问它的兄弟。从父，你可以通过参可以访问到子组件，反过来，你也可以访问它们的子组件
定义裁判见下文
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'));<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>片断如果您在导航中有多个按钮，并且您想要集中多个不同的输入，可以按照以下方式进行：
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'));<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>这不是很好的解决方案：现在App需要了解View组件中的引用。最好避免这种耦合。 – dfsq
提到，在以前的疑问句，一个谁回答疑问句将为您提供这个解决方案也，在接受的答案提这个@Shubham将帮助您：http://*.com/a/ 43805395/5185595 –
虽然严格来说是一个不同的问题，但我现在感觉不好改变我的问题，然后所有回答原始问题的人都回答了他们的答案。我也已经选择了一个完美运作的答案，所以我宁愿保持干净。 –