如何加載另一個分量的onChange函數裏面ReactJS

Question

我有這個下面的代碼

var SelectOption = React.createClass({ 

    getInitialState: function() { 
    return { 
     data: [] 
    }; 
    }, 

    handleemployeeChange: function() { 
     alert('sssss'); 

    }, 

    loadOptionfromServer: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({ 
      data: data 
     }); 
     console.log(data); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 

    componentDidMount: function() { 
    alert('sssss'); 
    this.loadOptionfromServer(); 
    //setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
    }, 


    render: function() { 
    return (< SelectOptionList data = { 
     this.state.data 
     } 
     /> 
    ); 

    } 
}); 

var SelectOptionList = React.createClass({ 

    render: function() { 
    var commentNodes = this.props.data.map(function(list) { 
     return (< Addcontenttoselect id = { 
      list.emp_ide_id 
     } 
     option = { 
      list.emp_name 
     } > 
     < /Addcontenttoselect> 
    ); 
    }); 
    return (< select id = "select1" 
     className = "form-control" 
     data - placeholder = "Basic Select2 Box" 
     onChange = { 
     this.handleemployeeChange 
     } > { 
     commentNodes 
     } < /select> 
    ); 
    } 
}); 

var Addcontenttoselect = React.createClass({ 
    render: function() { 
    return (< option value = "{this.props.id}" > { 
     this.props.option 
    } < /option>); 
    } 
}); 

ReactDOM.render(< div className = "col-md-3" > <h3> Select Employee to Review < /h3><SelectOption url="/appraisal/employeelist " pollInterval={70000} /></div>, document.getElementById('select-box')); 

因此，這部分在瀏覽器中創建了一個選擇標記，我想利用所選選項的值，並調用另一組件將從數據創建一個表從API得到

的任何線索，請讓我知道

感謝

Answer 1

有了反應，你有MUL提供將數據傳遞到組件的方法，這在很大程度上取決於應用程序的使用和複雜性。

如果您有很多需要了解其他組件的狀態/數據的組件，您應該查看應用程序體系結構，如flux或redux。 Facebooks Flux

對於某些應用程序來說，完整的數據流架構可能會矯枉過正，因此這取決於您如何設計組件。一個常見的模式是讓一個組件處理應用程序的狀態/交互性。 您的主要組件將包含您應用的所有業務邏輯，並將其功能傳遞給其子，例如改變狀態。 你可以閱讀更多關於此這裏Facebook thinking react

我做了一些小提琴這不會忽略你的挑戰：

Fiddle

var Select = React.createClass({ 
render: function() { 
var selectOptions = this.props.options.map(function(optionData) { 
    return (
    <option key={optionData.id} value={optionData.id}> 
     {optionData.name} 
    </option> 
); 
}); 

return (
    <select 
    id="select1" 
    className="form-control" 
    placeholder="Basic Select2 Box" 
    onChange={this.props.onChange} 
    > 
    { selectOptions } 
    </select> 
    ); 
} 
}); 


    var SelectApp = React.createClass({ 
    // The main component holds the data 
    getInitialState: function() { 
    return { 
    data: [], 
    currentData: null 
    } 
}, 

componentDidMount: function() { 
    this.loadOptions(); 
}, 

loadOptions: function() { 
    var _this = this; 
    return setTimeout(function() { 
    _this.setState({data: [ 
    { 
     id: 1, 
     name: 'Foo Bar' 
    }, 
    { 
     id: 2, 
     name: 'Bar Foo' 
    } 
    ]}); 
    }, 2000); 
}, 

onChange: function (e) { 
    var employeeId = e.target.value, 
    _this = this, 
    mockedData = [ 
    { 
     id: 1, 
     data: 'Good employee' 
    }, 
    { 
     id: 2, 
     data: 'Not so good employee' 
    } 
    ]; 

// Mocking an additional data fetch 
setTimeout(function() { 
    var result = mockedData.find(function (employeeData) { 
    return (employeeData.id == employeeId); 
    }); 

    _this.setState({ 
    currentData: result 
    }); 
}, 2000); 

}, 

renderResult: function() { 
if (this.state.currentData) { 
    return (
    <div> 
       <h4>Employee:</h4> 
     <p>{this.state.currentData.data}</p> 
    </div> 
); 
} 

return; 
}, 

render: function() { 
return (
    <div> 
    <div> 
     <h3> Select Employee to Review </h3> 
     <Select url={this.props.url} options={this.state.data} onChange={this.onChange}/> 
    </div> 
      {this.renderResult()} 
    </div> 
); 
} 
}); 

ReactDOM.render(<SelectApp url="/appraisal/employeelist " pollInterval={70000} />, document.getElementById('container')); 

編輯：

renderResult: function() { 
if (this.state.currentData) { 
    return (
    <loadUserAppraisal url="something" empid={this.state.currentData.id} /> 
); 
}