javascript - 如何以reactjs形式绑定(bind)数据

Question

我已经开始研究 reactjs 技术，我对这项技术完全陌生。我想将数据与我的表格下拉列表和下拉项目选择绑定(bind)我想提供我的其他表格字段。在这里我正在创建表格来为社会成员生成账单并且我想填写社会成员姓名以便在下降时绑定(bind)文本字段上的下拉框和帐单更改。有时我遇到问题说“类型错误:节点为空”。而且我不明白如何将数据绑定(bind)到字段。

这是我的逻辑，请检查并让我知道我在这里遗漏了什么

 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>
        )
    }

Answer 1

除了使用获取初始状态，您还可以使用构造函数，在构造函数中初始化状态并在构造函数中绑定(bind)方法。

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)
}

然后当您在渲染方法中调用 select 时，您应该能够说...

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

尽管您需要在 React 中添加一个键来跟踪列表，所以将第一行更改为 <div key={i} onClick={this.select(item)}> .您可以单独阅读 key https://reactjs.org/docs/lists-and-keys.html#keys