react.js - 请问这种情况下怎样把子组件定义的属性传递回父组件？

问题描述

问 题

这是我定义的组件代码，目的是为了能够把选中的值放到文本框input里，同时要能够把选中的当前数据的id获取到。
请问我要怎样在引用的地方中获取到这个wareId

var LinkComplete = React.createClass({
    getInitialState: function () {
        return {

        };
    },
    componentDidMount: function () {
        this.loadWareHouse();
    },
    loadWareHouse(){
        SuwenClient.post({
            url:'/warehouse',
            success(rsp){
                var data = rsp.payload.warehouse;
                this.setState({warehouse:data})
            }
        },this)
    },
    render: function () {
        return (
            <div>
                <input type="text"
                       name={this.props.name}
                       onFocus={this.onfocus}
                       wareId={this.state.wareId}
                       value={this.state.wareData != undefined ? this.state.wareData.name : ''}/>
                  {this.state.show ? this.renderWarehouse(): ''}
            </div>
        );
    },
    onfocus(){
        this.setState({show:true});
    },
    renderWarehouse(){
        var arr = [];
        var that = this;
        var expandState = this.state.expandState || {};
        var showWares = function (ware,lvl) {
            var key = ware.id +'-'+ware.pid;
            var has = hasWare(ware)
            var openBtn = <span className="open_btn" ref="openBtn" onClick={expand.bind(that, key)}>
            <i className="fa fa-caret-right" style={{fontSize: "1.5rem", marginRight: '5px'}}></i>
              </span>

            var closeBtn = <span className="open_btn" ref="openBtn" onClick={expand.bind(that, key)}>
            <i className="fa fa-caret-down" style={{fontSize: "1.5rem", marginRight: '5px'}}></i>
             </span>
            arr.push(<li key={key} onClick={this.selectWarehouse.bind(null,ware)}>
                {createIndent(lvl, has)}
                {expandState[key] ? openBtn : closeBtn}
                {ware.name}
            </li>)

            if (has && !expandState[key]){
                ware.warehouseList.map(ware=>showWares(ware,lvl+1));
            }
        }.bind(this);
        function hasWare(ware) {
            return ware.warehouseList && ware.warehouseList.length
        }
        function expand(key) {
            expandState[key] = !expandState[key];
            this.setState({expandState: expandState});
        }
        function createIndent(lvl, has) {
            var x = [];
            for (var i = 0; i < lvl; i++) {
                x.push(<span key={i}>&nbsp;&nbsp;</span>);
            }
            return x;
        }
        $.map(this.state.warehouse.content,function (ware) {
            showWares(ware,0);
        }.bind(this))
        return (
            <div className="ware-container">
                <div className="ware-content scroll-style">
                    <ul>
                        {arr}
                    </ul>
                </div>
            </div>
        )
    },
    saveWare(e){
    },
    selectWarehouse(ware,e){
        e.target.value = ware.id
        this.setState({wareData:ware,show:false,wareId:e.target.value})
    }
})

解决方案

// 父组件
class Something extends React.Component {
  handler(wareId) {
    // do something here
  }
  render() {
    <LinkComplete
      xxx=xxx
      xxx=xxx
      onChange={this.handler}
    />
  }
}

// LinkComplete 
class LinkComplete extends React.Component {
  ...
  selectWarehouse(ware,e){
    e.target.value = ware.id
    this.setState({wareData:ware,show:false,wareId:e.target.value})
    // 使用传进来的 onChange 方法
    this.props.onChange(ware.id)
  }
}

这篇关于react.js - 请问这种情况下怎样把子组件定义的属性传递回父组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！