Как загрузить другой компонент внутри функции 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')); 

Так что этот компонент создает Select Tag в браузере, я хочу взять значение выбранного параметра и вызов других компонент, который создает таблицу из данных, полученных от API

Любые провода, пожалуйста, дайте мне знать

Благодаря

Answer 1

с реагируют у вас есть мул несколько способов передачи данных вашим компонентам, это в значительной степени зависит от использования и сложности вашего приложения.

Если у вас есть много компонентов, которые необходимо знать о состоянии/данных другого компонента, вы должны посмотреть на архитектуры приложений, такие как 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')); 

Edit:

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