JSX React:使用ref选择文本框中的所有内容

Question

这是我目前拥有的。

class App extends React.Component {
constructor(props) {
super(props)

this.textInput = React.createRef();
this.state = {
value: 'select all on click'
}
}

handleClick = e => {
e.preventDefault();
this.setState({ value: this.textInput.current.select()})
};
render() {
return (
<div>
<input type="text" ref={this.textInput}
value={this.state.value}
onClick={this.handleClick}/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

这是有效的，但在我的浏览器中，我在handleClick中不断收到这个错误：Cannot read property 'current' of undefined.这是因为我在本地环境中使用了一些<Child>组件来代替<input>。我试着按照这里的建议重命名ref以匹配父道具https://stackoverflow.com/a/53241934/6312629，但这也不起作用。

任何关于如何解决这一问题的建议都将不胜感激！

非常感谢！

Answer 1

对于react children组件，ref只需要转发给child并传递给实际输入，因为ref不被视为道具(类似于键的不同处理方式(。因此，可以使用React.forwardRef提取ref，并将其作为道具传递给子对象。对你来说，它可能看起来像这样，但你可能会在这里找到一个更合适的解决方案：https://reactjs.org/docs/forwarding-refs.html#forwarding-参考dom组件

// App.js
class App extends React.Component {
...
render() {
return (
<Child
ref={this.textInput}
handleClick={this.handleClick}
value={this.state.value}
/>
);
}
}
// Child.js
class Child extends React.Component {
render() {
return (
<div>
<input type="text" ref={this.props.forwardedRef}
value={this.props.value}
onClick={this.props.handleClick}/>
</div>
);
}
}
export default React.forwardRef((props, ref) => (
<Child forwardedRef={ref} {...props} />
));

Answer 2

如果您从一个新项目开始，我建议尝试使用钩子的功能组件。

尝试自己设置参考：

ref={ ref => {
this.textInput = ref
}}