1
我有這樣如何使一個選擇選項的表的onChange IN ReactJs
var SelectOption = React.createClass({
getInitialState: function() {
return {
data: [],
empid: null
};
},
componentDidMount: function() {
//this.loadOptionfromServer();
//setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
onChange: function(e) {
var employeeId = e.target.value;
if (employeeId == 1) {
this.setState({
empid: 'xxx'
});
} else {
this.setState({
empid: employeeId
})
}
this.renderTable();
},
renderTable: function() {
< Tableforbasictask data = {
data
}
/>
},
render: function() {
return (<div>
<div>
<h3> Select Employee to Review < /h3> < SelectOptionList onChange = {
this.onChange
}
data = {
this.state.data
}
/> < /div> {
this.renderTable()
} < /div>
);
}
});
var SelectOptionList = React.createClass({
getInitialState: function() {
return {
empid: ''
};
},
render: function() {
return (< select id = "select1"
className = "form-control"
data - placeholder = "Basic Select2 Box"
onChange = {
this.props.onChange
} > < option value = "1" > Select Employee < /option> < option value = "2" > Some Value < /option><option value="3">Some Value</option > < option value = "4" > Some Value < /option></select >
);
}
});
ReactDOM.render(< div className = "row" > < SelectOption/> </div> , document.getElementById('content'));
一個選擇選項的代碼然後,我有一個表組件
var data = [{
id: 1,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 2,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 3,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 4,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 5,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}];
var Addcontenttotable = React.createClass({
render: function() {
return (<tr> <td> {
this.props.taskName
} < /td> <td> {
this.props.standarDescription
} < /td> <td> {
this.props.emplComment
} < /td> <td> {
this.props.empRating
} < /td> </tr>);
}
});
var TableforbasictaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (< Addcontenttotable taskName = {
comment.taskName
}
standarDescription = {
comment.standarDescription
}
emplComment = {
comment.emplComment
}
empRating = {
comment.empRating
}
key = {
comment.id
} >
< /Addcontenttotable>
);
});
return (<tbody> {
commentNodes
} < /tbody>);
}
});
var Tableforbasictask = React.createClass({
getInitialState: function() {
return {
data: this.props.data
};
},
handleSubmit: function(comment) {
comment.id = this.state.data.length + 1;
this.setState({
data: this.state.data.concat(comment)
});
},
render: function() {
return (< div className = "downloadlinks" >
< table className = "table table-bordered table-striped-col nomargin"
id = "table-data" >
<thead>
< tr align = "center" >
<td> Task Name < /td> <td> Standard Discription of Task </td> <td> Employee Comment < /td> <td> Employee rating </td> < /tr> </thead>
< TableforbasictaskList data = {
this.state.data
}
/> </table>
< /div>
);
}
});
我tryinig呈現表只有當選擇標籤中的選項被改變時。
但它不是發生
這裏是Link的小提琴
非常感謝,實際上在我的本地主機中,我將Option的值發送給調用api的Table Component以獲取該ID的詳細信息。希望我解釋了我的觀點 – Vikram
另一個問題是,當我選擇該選項,然後下一次它不包含Table組件時,我在Table組件上有一個console.log(this.props.id),但是它會記錄任何東西 – Vikram
我剛剛測試過你的代碼和表格會在我每次改變選擇時渲染(我在表格的渲染方法中放置了一個console.log) – luiso1979