时间戳

首页 > 解决方案 > 反应：当元素为真时无法显示按钮

reactjs - 反应：当元素为真时无法显示按钮

问题描述

这是我的代码：

const Agregar = ({inputPregunta, validatePregunta}) => {
  
  return(
    <div id="content">
      <h2>¿Cual es tu pregunta?</h2>
      <input id="valorPregunta" type="text" placeholder="Añade aqui tu pregunta..." onChange={(e) => inputPregunta(e)}/>
      {validatePregunta && <button>Agregar</button>}
    </div>
  );
}

我想要做的是当输入有东西输入时，prop validatePregunta（默认为 false）变为 true 并且按钮元素显示，因为我试图在 App.js 文件中执行如下方法：

actualizarPregunta = (e) => {
    this.setState({inputPregunta: e.target.value})
    
    if(this.state.inputPregunta.trim().length > 0){
      this.setState({validatePregunta: true})
    } else {
      this.setState({validatePregunta: false})
    }
  }

但是没有显示，我做错了什么吗？

编辑：这是道具渲染的代码：

renderRoute = () => {
    switch(this.state.route) {
      case 'menu':
        return (
          <div>
            <Header />
            <Agregar inputPregunta={this.actualizarPregunta} validate={this.state.validatePregunta}/>
            <Publications />
          </div>
        )
      default :
        return (
          <div>
            <Header />
            <Publications />
          </div>
        )
    }
  }
  
  render() {
    return (
      <div>
        {
          this.renderRoute(this.state.route)
        }
      </div>
    );
  }

标签： reactjsif-statementreact-props

解决方案

第一期

道具不对齐。

组件签名是const Agregar = ({inputPregunta, validatePregunta})但是你通过validate={this.state.validatePregunta}.

<Agregar
  inputPregunta={this.actualizarPregunta}
  validate={this.state.validatePregunta}
/>

解决方案

对齐道具名称的使用。

<Agregar
  inputPregunta={this.actualizarPregunta}
  validatePregunta={this.state.validatePregunta}
/>

第 2 期

React 组件状态生命周期。入队状态试图在入队的同一个反应循环中被引用。您需要在下一个渲染周期之前不可用的入队值。

actualizarPregunta = (e) => {
  this.setState({ inputPregunta: e.target.value }); // <-- state update enqueued

  if (this.state.inputPregunta.trim().length > 0){ // <-- current state value
    this.setState({ validatePregunta: true })
  } else {
    this.setState({ validatePregunta: false })
  }
}

解决方案 1

将状态更新入队并使用当前事件值设置其他状态

actualizarPregunta = (e) => {
  const { value } = e.target;
  this.setState({
    inputPregunta: value,
    validatePregunta: !!value.trim().length, // <-- *
  });
}

* length == 0 为假，length !== 0 为真，并强制为 boolean ( !!)

解决方案 2

将状态更新入队并使用componentDidUpdate生命周期函数来处理效果

actualizarPregunta = (e) => {
  const { value } = e.target;
  this.setState({ inputPregunta: value });
}

componentDidUpdate(prevProps, prevState) {
  const { inputPregunta } = this.state;
  if (prevState.inputPregunta !== inputPregunta) {
    this.setState({ validatePregunta: !!inputPregunta.trim().length });
  }
}

解决方案#1 更简单、更直接。

推荐阅读