Javascript 如何在JS表单中绑定数据

我已经开始研究reactjs技术，对于这项技术我是全新的。我想用我在表单中的下拉列表绑定数据，在选择下拉列表项时，我想输入我的其他表单字段。在这里，我创建表单为社团成员生成账单，我想填写社团成员名称，以便在下拉框中绑定，并在文本字段中更改账单。有时我会遇到这样的问题：“TypeError:node为null”。我不知道如何将数据绑定到字段

这是我的逻辑，请检查一下，让我知道我遗漏了什么

 constructor(props, fdb) {
        super(props);

        this.state = {
            bill_nm: '',
            bill_eml: '',
            bill_total: '',
            bill_id: '',
            inputs:[],
            userInput:[]
        };
        this.userState = {
            user_id:'',
            email:'',
            first_name:'',
            last_name:''
        };
        this.chargeState ={
            charge_id:'',
            charge_title:'',
            charge_type:'',
            charge_amt:''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmitFirebase = this.handleSubmitFirebase.bind(this);
        this.sendCallback = this.sendCallback.bind(this);
        this.appendInput = this.appendInput.bind(this);
        this.getInitialState = this.getInitialState.bind(this);
        this.appendUserInput = this.appendUserInput.bind(this);
        this.usercharge = [];

        const rootRef = DbConfig.database().ref();
        const post = rootRef.child('billing').orderByKey();
        const users = rootRef.child('users').orderByKey();
        const bill_charges = rootRef.child('billing_charges').orderByKey();

    }

    componentDidMount() {

             this.users.once('value', snap => {
            snap.forEach(child => {
                this.userState = {
                    user_id: child.key,
                    email: child.val().email,
                    first_name: child.val().first_name,
                    last_name: child.val().last_name
                };

            });

        });

        this.bill_charges.once('value', snap => {
            snap.forEach(child => {
                this.chargeState = {
                    chrage_key:child.key,
                    charge_id: child.charge_id,
                    charge_title: child.val().charge_title,
                    charge_type: child.val().charge_type,
                    charge_amt: child.val().charge_amt
                };
                this.usercharge = this.chargeState;
               //console.log( this.usercharge);
            });
        });

        }

           handleChange(event) {
        this.setState({ value: event.target.value });
    }


   getInitialState() {
        return {inputs:[]};
    }
    appendUserInput() {
        //e.preventDefault();

        // DbConfig.database().ref().child('users').orderByKey().once('value', snap => {
        //     snap.forEach(child => {
        //         this.userState = {
        //             user_id: child.key,
        //             email: child.val().email,
        //             first_name: child.val().first_name,
        //             last_name: child.val().last_name
        //         };
        //     });
        // });
        var newInput1 = this.state.userInput.length;
       // var newInput = this.userState.length;
        console.log('len1='+newInput1);
       // console.log('len'+newInput);
        this.setState({ userInput: this.state.userInput.concat(newInput1)});

    }
    appendInput(e) {
        e.preventDefault();
        var newInput = this.state.inputs.length;
            console.log('newinput'+newInput);
        this.setState({ inputs: this.state.inputs.concat(newInput)},function(){
            return;
        });
        console.log('input concate'+this.state.inputs);
    }

      render() {
        return (
            <div className="content">
                <NavBar></NavBar>
                <div className="row">
                    <div className="col-md-10">
                        <div className="card">
                            <div className="card-header card-header-icon" data-background-color="rose">
                                <i className="material-icons">receipt</i>
                            </div>
                            <div className="card-content">
                                <h4 className="card-title">Add Bill</h4>
                                <form onSubmit={this.handleSubmitFirebase}>
                                    <div className="form-group label-floating is-empty">
                                        <label className="control-label">Person Name</label>

                                        <div className="room-main">
                                        <div className="online-est">                                         
                                                <a href="javascript:void(0);" onClick={this.appendUserInput} className="rednew-btn"><i className="fa fa-plus-circle"></i> Add user</a>
                                            <select className="room-form">
                                           {this.state.userInput.map(function(item){
                                               console.log('i'+item);
                                                return (
                                                          <option ref={item}>{item}</option> 
                                                       )
                                           })}
                                           </select>
                                        </div>
                                    </div>
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                    <label className="control-label">Person Name</label>
                                        <div className="room-main">
                                        <div className="online-est"> 
                                                <a href="javascript:void(0);" onClick={this.appendInput} className="rednew-btn"><i className="fa fa-plus-circle"></i> Add charge</a>
                                            <select>
                                           {this.state.inputs.map(function(item){
                                                return (
                                                            <option ref={item}>{item}</option>
                                                       )
                                           })}
                                           </select>
                                        </div>
                                    </div>
                                    <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                            <label className="control-label">status</label>
                                            <select>
                                                <option value="Unpaid">Unpaid</option>
                                                <option value="Paid">Paid</option>
                                            </select>
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                            <label className="control-label">total</label>
                                            <input type="text" className="form-control" ref={el => this.billtotal = el} onChange={this.handleChange} />
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                            <label className="control-label">Bill period</label>
                                            <input type="date" className="form-control" ref={el => this.billto = el} onChange={this.handleChange} />
                                            <input type="date" className="form-control" ref={el => this.billfrom = el} onChange={this.handleChange} />
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                        <span className="material-input"></span></div>
                                    <button type="submit" className="btn btn-fill btn-rose">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        )
    }

构造函数（道具、fdb）{
超级（道具）；
此.state={
条例草案：，
比尔·埃米尔：“，
账单总计：''，
账单编号：''，
输入：[]，
用户输入：[]
};
this.userState={
用户id:“”，
电子邮件：“”，
名字：''，
姓氏：“”
};
这个州={
费用id:“”，
押记名称：''，
费用类型：“”，
费用金额：''
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmitFirebase=this.handleSubmitFirebase.bind（this）；
this.sendCallback=this.sendCallback.bind（this）；
this.appendInput=this.appendInput.bind（this）；
this.getInitialState=this.getInitialState.bind（this）；
this.appendUserInput=this.appendUserInput.bind（this）；
this.usercharge=[]；
const rootRef=DbConfig.database（）.ref（）；
const post=rootRef.child（'billing'）.orderByKey（）；
const users=rootRef.child（'users'）.orderByKey（）；
const bill_charges=rootRef.child（'billing_charges'）.orderByKey（）；
}
componentDidMount（）{
这个.users.once（'value'，snap=>{
snap.forEach（子项=>{
this.userState={
用户id:child.key，
电子邮件：child.val（）.email，
名字：child.val（）。名字，
姓氏：child.val（）。姓氏
};
});
});
此.bill\u收费。一次（'value'，snap=>{
snap.forEach（子项=>{
this.chargeState={
chrage_key:child.key，
charge\u id:child.charge\u id，
charge\u title:child.val（）.charge\u title，
费用类型：child.val（）。费用类型，
费用金额：child.val（）.费用金额
};
this.usercharge=this.chargeState；
//console.log（this.usercharge）；
});
});
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
getInitialState（）{
返回{输入：[]}；
}
appendUserInput（）{
//e、 预防默认值（）；
//DbConfig.database（）.ref（）.child（'users'）.orderByKey（）.once（'value'，snap=>{
//snap.forEach（子项=>{
//this.userState={
//用户id:child.key，
//电子邮件：child.val（）.email，
//名字：child.val（）。名字，
//姓氏：child.val（）。姓氏
//         };
//     });
// });
var newInput1=this.state.userInput.length；
//var newInput=this.userState.length；
log（'len1='+newInput1）；
//console.log（'len'+newInput）；
this.setState（{userInput:this.state.userInput.concat（newInput1）}）；
}
追加输入（e）{
e、 预防默认值（）；
var newInput=this.state.inputs.length；
console.log（'newinput'+newinput）；
this.setState（{inputs:this.state.inputs.concat（newInput）}，function（）{
返回；
});
console.log（'input concate'+this.state.inputs）；
}
render（）{
返回(
收据
添加账单
人名
{this.state.userInput.map（函数（项）{
console.log（'i'+项）；
返回(
{item}
)
})}
人名
{this.state.inputs.map（函数（项）{
返回(
{item}
)
})}
地位
<div className="post">
  <h3>{this.state.bill_nm}</h3>
  <h2>{this.state.bill_eml}</h2>
  <p>{this.state.bill_total}</p>
</div>

<input type="text" className="form-control" ref={el => this.pnm = el} onChange={this.handleChange} />

constructor(props) {
  super(props);
  this.state = {
    listVisible: false
  };
 this.select = this.select.bind(this)
 this.show = this.show.bind(this)
 this.hide = this.hide.bind(this)
 this.renderListItems = this.renderListItems.bind(this)
}

<div onClick={this.select(item)}>
  <span>{item.name}</span>
</div>