Javascript 不更新值的反应状态

我试图在React中添加一些代码，如果年龄大于14岁，则电子邮件输入不应显示，但它不起作用。不知道怎么了

class ContactForm extends React.Component {
  state = {
    firstName:'',
    age:14,
    email:''
  }

  handleChange= (e)=>{
    
  }

  render() {
    
    return (
    <div>
      <input type="text" name="firstName" />
      <input type="text" name="age" />
      {this.state.age}
      {(this.state.age>=14)?
      <input type="text" name="email" />:''}
    </div>
      )
  }
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<ContactForm />, rootElement);

类ContactForm扩展了React.Component{
状态={
名字：''，
年龄:14岁，
电子邮件：“”
}
handleChange=（e）=>{
}
render（）{
返回(
{this.state.age}
{（this.state.age>=14）？
:''}
)
}
}
document.body.innerHTML=“”；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

三元运算符被反转。如果年龄

=14

，则当前确实显示输入。交换

''

和

输入。如果用户不是
>=14

  {(this.state.age>=14) ?
  '' : <input type="text" name="email" />}

{（this.state.age>=14）？
'' : }

另一个可能稍微干净一点的选择是：

{(this.state.age < 14) && <input type="text" name="email" />}

{（this.state.age<14）&&}
如果您看到该方法，它会显示如果年龄大于或等于14岁，则显示电子邮件。按以下方式进行更改：

    return (
    <div>
      <input type="text" name="firstName" />
      <input type="text" name="age" />
      {this.state.age}
      {(this.state.age>=14)?'':
      <input type="text" name="email" />}
    </div>
      )
  

返回(
{this.state.age}
{（this.state.age>=14）？“”：
}
)
您已经将年龄定义为文本，因此可以将其转换为int。是的，javascript具有自动对话功能，但这不是一种好的做法。您可以在现有代码中这样做

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}

render() {

    return (
        <div>
            <input type="text" name="firstName" onChange={(e) => this.handleChange(e)} />
            <input type="text" name="age" onChange={(e) => this.handleChange(e)} />
            {this.state.age}
            {(parseInt(this.state.age) >= 14) ?
                <input type="text" name="email" onChange={(e) => this.handleChange(e)} /> : ''}
        </div>
    )
}

handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
this.handleChange（e）}/>
this.handleChange（e）}/>
{this.state.age}
{（parseInt（this.state.age）>=14）？
this.handleChange（e）}/>：“”
)
}

您没有在更新年龄时调用handleChange方法
从“React”导入React；
类ContactForm扩展了React.Component{
状态={
名字：''，
年龄:14岁，
电子邮件：“”
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
this.handleChange（e）}/>
this.handleChange（e）}/>
{this.state.age>14？''：this.handleChange（e）}/>}
)
}
}
导出默认联系人表单；

访问：
您的三元语句与您想要的相反。固定的：

  **{(this.state.age >= 14) ? `` : <input type="text" name="email" /> }**

**{（this.state.age>=14）``:}**
您是如何处理年龄变化的？输入错误，您混淆了三元真：假条件，即它应该是
this.state.age>14？“”：
或
this.state.age
  **{(this.state.age >= 14) ? `` : <input type="text" name="email" /> }**