javascript - 通过事件捕获 React Refs

Question

我有以下 JSX:

import React, {Component} from 'react';

class Register extends Component {
    handleSubmit(){
        console.log("hey!")
    }

    setHandles(c){
        //This never executes.
        console.log("foo");
    }    

    render() {
        return (
<form className='form-horizontal' onSubmit={this.handleSubmit}>
    <h4>Create a new account.</h4>
    <hr />        
    <div className="form-group">
        <label htmlFor="Email" className="col-md-2 control-label">User Name</label>
        <div className="col-md-10">
            //********************************
            //**** USING SETHANDLES HERE *****
            //********************************
            <input type="email" className="form-control" ref="{this.setHandles}" />
            <span className="text-danger"></span>
        </div>
    </div>
    <div className="form-group">
        <label htmlFor="Password" className="col-md-2 control-label">Password</label>
        <div className="col-md-10">
            //********************************
            //**** USING SETHANDLES HERE *****
            //********************************
            <input type="password" className="form-control" ref="{this.setHandles}" />
            <span className="text-danger"></span>
        </div>
    </div>
...

我的setHandles函数永远不会执行。为什么？

我的目的是为每个input赋予属性ref="{this.setHandles}"，以便setHandles回调可以注册每个对应的 DOM 元素。稍后，当我准备好发布表单时，我可以循环遍历 DOM 元素数组以获取相应的输入值。

Answer 1

它没有调用您的函数，因为您正在传递一个字符串，remove the quote marks ，ref={this.setHandles}。

但是，实现您想要的效果的更好方法是将 onChange 事件分配给每个输入，以便将值存储在您的状态中。

类似这样的事情

constructor(props){
   this.onChange = this.onChange.bind(this);
   this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(){
   console.log(this.state); // You got your input values here
}
onChange(e){
    this.setState({[e.target.name] : e.target.value});
}
render(){
   return <div><form> 
    <input type="text" name="mail" className="form-control"
    onChange={this.onChange} />
    <input type="text" name="password"
    className="form-control" ref={this.setHandles} onChange={this.onChange} />
    <button onClick={this.onSubmit}>Submit</button>
   </form></div>
}

full working example