Question

在this ReactJS documentation on refs中， myInput 已分配给输入的参考号。

<input ref="myInput" />

我有多个输入，我只在运行时知道。我想知道如何将 myInput1 ， myImput2 分配给多个输入？

更新：

我想澄清为什么我只知道运行时的输入数量。

我有一个高阶组件，其中有一个输入控件。高阶组件可以很多。它们是从一组数据创建的。我希望为高阶组件内的输入设置 ref ，这样我就可以显示一些工具提示。 DOM中只有一个工具提示，并根据输入控件的位置进行定位。

Answer 1

这是一种方法：您可以在映射数组时动态添加引用。

http://jsfiddle.net/vhuumox0/21/

class Main extends React.Component{
    constructor(props){
    super(props);
  }
  componentDidMount() {
   console.log(this.refs); // works, shows 3
   console.log(this.refs.myInput2); // works
  }
  render() {
    const inputs = this.props.inputs.map((inp, i) => {
     return <input ref={`myInput${i}`}>{inp}</input>
    })
    return (
        <div>{inputs}</div>
    );
  }
}

ReactDOM.render(<Main inputs={['input1', 'input2', 'input3']}/>,

如何在ReactJS中为refs分配动态值？

1 个答案: