2017-10-21 7 views
0

Je suis en ajoutant une zone de texte sur le clic du bouton Ajouter un nouveau candidat et je veux également appeler valider la fonction du composant NewCandidate sur le bouton de clic de sauvegarde J'ai essayé avec le suivant code mais il jette une erreur si quelqu'un connaît la solution s'il vous plaît répondre ..................................... .................................................. ..................................................comment appeler une fonction d'un autre composant en réaction

<!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> 
+0

S'il vous plaît modifier votre question d'inclure le message d'erreur que vous obtenez. S'il vous plait, ne dites pas simplement "ça jette une erreur" et attendez-vous à ce que nous comprenions l'erreur. –

+0

quel est le but de valider la fonction? Voulez-vous valider un seul candidat ou tous les candidats? –

+0

Je dois valider tout le candidat avec un seul bouton enregistrer après la validation est passé Je dois enregistrer toutes les données mais pour l'instant j'ai besoin d'aide sur la validation seulement –

Répondre

0

S'il vous plaît vérifier l'extrait ouvrable suivant.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Hello React!</title> 
 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/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>

+0

mais le bouton de sauvegarde a disparu après son clic et il ne devrait pas être dupliqué sur le cliquez sur ajouter un nouveau bouton candidat, en fait, le bouton de sauvegarde doit appeler la fonction de validation de chaque composant –

+0

Attendez-vous à enregistrer le bouton à côté de chaque champ de texte? –

+0

non, en fait, il devrait y avoir un seul bouton de sauvegarde comme Ajouter un nouveau bouton candidat –

0

Voici un exemple. Le composant principal de l'application agit comme un conteneur pour toutes les informations et actions pertinentes. Nous utilisons ensuite des composants enfant qui sont utilisés pour présenter des données qui utiliseront des méthodes qui ont été transmises du conteneur pour effectuer des actions.

class NewCandidate extends React.Component { 
 
    state = { 
 
    name: "" 
 
    }; 
 
    handleChange = evt => this.setState({ 
 
    name: evt.target.value 
 
    }); 
 
    addCandidate =() => { 
 
    const { name } = this.state; 
 
    if (name === "") { 
 
     return console.warn("input is empty"); 
 
    } 
 
    return this.setState({ 
 
     name: '', 
 
    },() => this.props.add(name)); 
 
    }; 
 
    render() { 
 
    if (this.props.display) { 
 
     return (
 
     <div> 
 
      <label>Name</label> 
 
      <input 
 
      type="text" 
 
      value={this.state.name} 
 
      onChange={this.handleChange} 
 
      /> 
 
      <button onClick={this.addCandidate}>Add Candidate</button> 
 
     </div> 
 
    ); 
 
    } 
 
    return null; 
 
    } 
 
} 
 

 
const Candidate = ({ candidate }) => <div>{candidate.name}</div>; 
 

 
class App extends React.Component { 
 
    state = { 
 
    showNewCandidateForm: false, 
 
    candidates: [ 
 
     { 
 
     id: 1, 
 
     name: "Jeff" 
 
     }, 
 
     { 
 
     id: 2, 
 
     name: "Andrew" 
 
     }, 
 
     { 
 
     id: 3, 
 
     name: "Jess" 
 
     } 
 
    ] 
 
    }; 
 
    addCandidate = name => { 
 
    alert('validation here'); 
 
    const { candidates } = this.state; 
 
    this.setState({ 
 
     showNewCandidateForm: false, 
 
     candidates: [ 
 
     ...candidates, 
 
     { 
 
      id: candidates[candidates.length - 1].id + 1, 
 
      name, 
 
     } 
 
     ] 
 
    }); 
 
    }; 
 
    showNewCandidateForm =() => this.setState({ 
 
    showNewCandidateForm: true 
 
    }); 
 
    hideNewCandidateForm =() => this.setState({ 
 
    showNewCandidateForm: false 
 
    }); 
 
    render() { 
 
    return (
 
     <div> 
 
     <NewCandidate 
 
      display={this.state.showNewCandidateForm} 
 
      hide={this.hideNewCandidateForm} 
 
      add={this.addCandidate} 
 
     /> 
 
     {this.state.candidates.map(candidate => { 
 
      return <Candidate key={candidate.id} candidate={candidate} />; 
 
     })} 
 
     <button onClick={this.showNewCandidateForm}>New Candidate</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>