reactJSにhide/show要素を実装しようとしていて、どういうわけか期待どおりに機能しません。ここで私が持っているコードです：reactJSの要素を表示/非表示にしない

const editDepartment = (props) => (
    <div id="editDepartment"> 
    <input type="text" id ='department' placeholder="Enter Department" className="department" value = {ManagerProfile.state.department} onChange={ManagerProfile.updateInputValueDepartment} required /> 
    <button type="submit" id='departmentButton' onClick={ManagerProfile.sendInfo}>Submit</button> 
    </div> 
); 

class ManagerProfile extends Component { 
    constructor(props){ 
    super(props); 
    this.state={department: "", student: "", isHidden: true}; 
    this.sendInfo = this.sendInfo.bind(this); 
    this.updateInputValueDepartment = 
    this.updateInputValueDepartment.bind(this); 
    this.updateInputValueStudent = 
    this.updateInputValueStudent.bind(this); 
    this.editDepartment = this.editDepartment.bind(this); 
    } 

updateInputValueDepartment(evt){ 
    this.setState({department: evt.target.value}); 
    } 

updateInputValueStudent(evt){ 
this.setState({student: evt.target.value}); 
} 

editDepartment(){ 
this.setState({isHidden: !this.state.isHidden}); 
} 

render() { 
return (
    <div id ='managerprofile'> 
    <Menubar /> 
    <div> 
     <label><b>Department</b></label> 
     <p> Current department:{this.state.department} </p> 
     <div> 
     <button onClick={this.editDepartment} >Edit Department</button> 
     {!this.state.isHidden && <editDepartment />} 
     </div> 
    </div> 

    <div> 
     <p><i>Enter your students usernames here to add them to your roster. It should be in the format of [email protected]</i></p> 
     <label><b>Student</b></label> 
     <input type="text" id ='student' placeholder="Enter Student Id" className="student" value ={this.state.student} onChange={this.updateInputValueStudent.bind(this)} required /> 

     <button type="submit" id='studentButton' onClick ={this.sendInfo.bind(this)}>Submit</button> 
    </div> 
    </div> 
); 
} 

sendInfo(){ 
var config = { headers: { 
        'Content-Type': 'application/json'}}; 
axios.post('/api/managerprofile',{ 
    student: this.state.student, 
    department: this.state.department 
}, config) 
.then(response => { 
    if (response.data == 'error'){ 
    alert('Invalid student username. Please enter a different username'); 
    } 
    else alert('Your changes have been saved'); 
    window.location = '/myprofile'; 
}) 
.catch(function (error) { 
    console.log(error); 
}); 
} 
} 
export default ManagerProfile;

私は、ファイルを実行し、ボタンをクリックすると、しかし、私は要素を参照してください（私はこれを見現れると私はボタンをクリックすると消えますが、タグは空ですクロムの要素を検査する）。だから私は何が欠けているタグは、それが持っているコンテンツを表示する代わりに空にする？

ありがとうございました！

出典

2017-11-06 nguyli03

はい、式の一部として配置するため表示され消えます。、

{!this.state.isHidden && <editDepartment />}

EDIT

{!this.state.isHidden ? <editDepartment /> : '' }

であなたのリアクトJSXコンポーネントは小文字であるHTML要素として解釈リアクト：ラインを交換してください。 `EditDepartment`

出典

2017-11-06 17:48:35 Jajo

私はreactJSと考えていますが、これら2つの文は似ています。私はあなたが提案したものに切り替えようとしましたが、それもうまくいきませんでした。 – nguyli03

ああ、そうです...あなたのコンポーネントは小文字で動作するはずです。 ReactはHTML要素のように解釈します。コンポーネントを ' 'に変更してください – Jajo

実際に動作します！ありがとう：D – nguyli03

reactJSの要素を表示/非表示にしない

答えて

であなたのリアクトJSXコンポーネントは小文字であるHTML要素として解釈リアクト： ラインを交換してください。 EditDepartment

関連する問題

であなたのリアクトJSXコンポーネントは小文字であるHTML要素として解釈リアクト：ラインを交換してください。 `EditDepartment`