从子表单组件ReactJS获取道具

Question

I am new to React .

I am writing a component ArrayInput that contains multiple(based on state) input box.

And ArrayInput need to handle each input box's onChange event.

I hope to get some specific props/attribute (in this case , "index") on these dramatically generated input box

I search for many posts and docs but can't find the correct way.

I know I can use this.ref[inputBoxRef] (react 14+) to get the actual DOM node , but find it has no "attribute" or "data" when using $(domnode).attr('index') or $(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

You can always use event.target . try event.target.index .

Answer 2

Your <input> (with lowercase) is a standard HTML component.

Probably best to try and avoid to put custom attributes on these components in react.
Because in effect you are then unnecessarily poluting your DOM with data that could and should be passed within react itself. And it is a long trip from react to DOM, to react reading the DOM again to get the data.

If you want to know the index variable inside handleChange, bind it to the call to handler, like:

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

and if you change you handler definition to:

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

To get the access the item's value (or any other DOM attribute), as well as the index.