时间戳

首页 > 解决方案 > Reactjs useState 不改变布尔状态，也不在点击时渲染子组件

reactjs - Reactjs useState 不改变布尔状态，也不在点击时渲染子组件

问题描述

当在名为TextInput的父组件中发生单击时，我试图在下面显示具有一个输入字段的SingleLineText组件。但是，单击后，useState不会更改状态，因此不会显示名为SingleLineText的子组件。

TextInput组件粘贴在SingleLineText组件的右下方 。

SingleLineText 组件：

import React from "react";
const SingleLineText = () => {    
    return(
      <form>
        <input />
      </form>
    )
}
export default SingleLineText;

TextInput SingleLineText 组件的 Parent 组件：

import React, {useState, useEffect} from "react";
import SingleLineText from "./SingleLineText"

const TextInput = (props) => {

 const [showSingleText, setShowSingleText] = useState(false);

 useEffect( () => {
 }, [showSingleText])

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      cancel();
      setShowSingleText(showSingleText => !showSingleText);
      //setShowSingleText(showSingleText => true);
    }
  }

  const cancel = () => {
    props.setShowInput(!props.showInput);
  }

  return (
    <>
      <div className="dropdown">
        <ul key={props.parentIndex}>
          {
            props.fieldType.map( (val, idx) => {
              return(
               <option key={idx}  value={val} className="dropdown-item" onClick={handleFieldDisplay}> {val} </option>
              )
           })
        }

        </ul>
      </div>
     
      {showSingleText && <SingleLineText />}
    </>
  )

}
export default TextInput;

最顶层或祖父组件：

import React, { useState, useEffect, useRef } from "react"
import PropTypes from "prop-types"
import TextInput from "components/pod_table/fields/inputs/TextInput";

const DynamicFields = (props) => {
  const fieldType = ['Checkbox', 'Dropdown', 'boolean', 'Single line text'];
  const [showDynamicField, setShowDynamicField ] = useState(false);
  const[showInput, setShowInput] = useState(false);

  useEffect(() => {}, [showDynamicField, showInput]);
  
  const handleShowDynamicField = (event) => {
     setShowDynamicField(!showDynamicField);
  }
     
  const handleSubDisplay = (event) => {
     if (event.target.value == "customise field type") {
       setShowDynamicField(!showDynamicField);
       setShowInput(!showInput);
     }
  }
  
  return (
    <React.Fragment>
      <div>
      <i className="bi bi-chevron-compact-down" onClick={handleShowDynamicField}></i>
       { showDynamicField &&
            (<div className="dropdown">

             <ul key={props.parentIndex}>
             {
                optionsHash.map( (val, idx) => {
                 return(
                  <option key={idx}  value={val} className="dropdown-item" onClick={handleSubDisplay}> {val} </option>
                 )
               })
             }

             </ul>
            </div>) }

        {showInput && <TextInput fieldType={fieldType} setShowInput={setShowInput} showInput={showInput} /> }
        </div>
    </React.Fragment>
  )

}

标签： reactjsreact-hooksuse-effectreact-component

解决方案

问题在于，handleFieldDisplayFunction您正在调用cancel更改父状态showInput并因此卸载 TextInput 组件本身的函数，因此 TextInput 组件showSingleText内部的状态更改没有任何影响。

以当您单击其中的选项时不需要卸载 TextInput 的方式设计您的代码

 const handleFieldDisplay = (event) => {
    if (event.target.value == "Single line text") {
      setShowSingleText(showSingleText => !showSingleText);
    }
  }

推荐阅读