Question

我是React的新手。

我正在编写一个包含多个（基于状态）输入框的组件ArrayInput。

ArrayInput需要处理每个输入框的onChange事件。

我希望在这些显着生成的输入框中获得一些特定的道具/属性（在本例中为“index”）

我搜索了很多帖子和文档，但找不到正确的方法。

我知道我可以使用this.ref[inputBoxRef]（反应14+）来获取实际的DOM节点，但在使用$(domnode).attr('index')或$(domnode).data('index')时发现它没有“属性”或“数据” 。

    window.ArrayInput = React.createClass({

            ......other methods

            handleChange:function(ref,event){
                var domInputBox = this.refs[ref];
                //trying to get the index attribute of this input
             }

            render:function(){
                var self = this;
                return (
                    <div className="input-wrapper"  >                               
                        <label>
                            <div>{this.props.label}</div>

                            {
                                this.state.value.map(function(e,i){
                                    return  (                           
                                        <input type="text"
                                            ref={"arrayBox"+i}
                                            key={"arrayBox"+i}
                                            index={i} //custom attribute
                                            value={e}
                                            onChange={self.handleChange.bind(self,"arrayBox"+i)}
                                        />
                                    )
                                })
                            }

                        </label>
                    </div>
                )
            }
    });

Answer 1

您始终可以使用event.target。试试event.target.index。

Answer 2

您的<input>（小写）是标准HTML组件。

可能最好尽量避免在反应中将自定义属性放在这些组件上因为实际上你不必使用可以并且应该在其内部传递的数据来对DOM进行不必要的策略。从做出反应到DOM，需要再次读取DOM以获取数据。

如果您想知道handleChange中的index变量，请将其绑定到对handler的调用，如：

onChange={self.handleChange.bind(self,i)}

如果您将处理程序定义更改为：

handleChange:function(element,i){
  console.log(element.value);    // outputs value of element that changed
  console.log(i);                // outputs the index of the element that changed

访问项目的值（或任何其他DOM属性）以及索引。

从子表单组件ReactJS获取道具

2 个答案: