I am appending a text box on click of Add New Candidate button and I also want to call validate the function of NewCandidate component on the click of save button I have tried with the following code but it's throwing an error if anybody knows the solution please answer.........................................................................................................................................
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
class NewCandidate extends React.Component{
validate(){
alert()
}
render(){
return(
<table>
<tr>
<th colSpan="2">Candidate details</th>
</tr>
<tr>
<th>Name</th><td><input type="text" ref="candName" /></td>
</tr>
</table>
)
}
}
var CandidateList = [<NewCandidate />];
class Interview extends React.Component{
constructor(props){
super();
this.state={candidates:props.candidates}
}
updateCandidateList(newCandidate){
var updatedCandidates=this.state.candidates;
updatedCandidates.push(newCandidate);
this.setState({candidates: updatedCandidates})
}
render(){
return(
<div>
<Candidate candidates={this.state.candidates} />
<AddNewCandidate candidateList={this.updateCandidateList.bind(this)} />
</div>
)
}
}
class AddNewCandidate extends React.Component{
constructor(){
super()
}
addNewCandidate(e){
e.preventDefault();
this.props.candidateList(<NewCandidate />)
}
render(){
return(
<form>
<button onClick={this.addNewCandidate.bind(this)}>Add New Candidate</button>
<button type="button" onClick={NewCandidate.validate.bind(this)}>Save</button>
</form>
)
}
}
class Candidate extends React.Component{
constructor(props){
super(props);
}
render(){
var items=this.props.candidates.map((item)=>{
return (<div>{item}</div>)
});
return(
<div>
{items}
</div>
)
}
}
ReactDOM.render(<Interview candidates={CandidateList}/>,document.getElementById("root"));
</script>
</body>
</html>
Please check the following working snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class NewCandidate extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
e.preventDefault();
this.props.handleCandidateChange(e.target.value, this.props.indexVal);
}
render(){
return(
<div>
<table>
<tbody>
<tr>
<th colSpan="2">Candidate details</th>
</tr>
<tr>
<th>Name</th><td><input type="text" onChange={this.handleChange}/></td>
</tr>
</tbody>
</table>
</div>
)
}
}
class Interview extends React.Component {
constructor(props){
super(props);
this.state = {
candidates: [],
values: []
}
this.addNewCandidate = this.addNewCandidate.bind(this);
this.handleSave = this.handleSave.bind(this);
this.handleCandidateChange = this.handleCandidateChange.bind(this);
}
handleCandidateChange(value, index) {
const newValues = [].concat(this.state.values);
newValues[index] = value;
this.setState({values: newValues});
}
handleSave(e) {
e.preventDefault();
this.state.values.forEach((val, index) => {
alert(`Validate ${index+1} value`);
})
}
addNewCandidate(e) {
e.preventDefault();
const candidateList = [].concat(this.state.candidates);
candidateList.push(<div key={`candidate-${candidateList.length}`}><NewCandidate indexVal={candidateList.length} handleCandidateChange={this.handleCandidateChange}/></div>)
this.setState({candidates: candidateList});
}
render() {
return (
<div>
{this.state.candidates}
<button type="button" onClick={this.addNewCandidate}>Add New Candidate</button>
<button type="button" onClick={this.handleSave}>Save</button>
</div>
)
}
}
// render Interview component
ReactDOM.render(<Interview />,document.getElementById("root"));
</script>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments