<p> 元素可见性的 ReactJS 问题

Question

我有 3 个输入字段，分别是姓名、地址和年份。我将所有 3 个变量的长度作为 props 传递给这个错误组件。 errorText 应该默认隐藏，如果名称少于 4 个字母则变为可见。

问题是当我输入一个少于 4 个字母的名称时，它将 errorText 变量更改为正确的“字段错误：名称”，我可以通过警报看到，但 P 元素仍然没有更改并保持为空。

默认情况下 errorText 不是我需要的另一个原因是，我有更多的 If 语句用于每个替代实例。比如Address和Name都小于4，那么就需要说“Error in field: address, name”。

这可能是什么问题？提前致谢。

const Error = (props) => {
    let errorText = '';
    let isVisible = false;
   
    if (props.nameLength < 4 && props.addressLength >= 4 && props.yearLength >= 4) {
        errorText = "Error in field: name"
        isVisible = true;
        alert("errorText: " + errorText); //This alert is only for testing
    }
    
    return (
    <div>
        <p style={{visibility: isVisible ? "visible" : "hidden"}}>{errorText}</p>
    </div>
    )
}

错误由 return 中的以下按钮呈现：

<button type="submit" onClick={() => Error({nameLength, addressLength, yearLength})}>Add</button>

Answer 1

在 React 中，为了影响您的 DOM 我们需要使用状态管理。因此，每次您使用变量更改 components/elements 时，都应在状态中提供。

尝试替换：

let isVisible = false

与

const [isVisible, setIsVisible] = React.useState(false);

并尝试改变

isVisible = true

里面如果有

setIsVisible(true)

Answer 2

我会以这种方式重构组件，然后它应该可以如你所愿地工作

const Error = (props) => {
    const [error, setError] = useState({errorText: '', isVisible: false})

    useEffect(() => {
      if (props.nameLength < 4 && props.addressLength >= 4 && props.yearLength >= 4) {
        setError({errorText: "Error in field: name", isVisible: true})
      }
    },[])
   
    
    return (
    <div>
        {error?.isVisible && <p>{error?.errorText}</p>}
    </div>
    )
}

工作示例https://codesandbox.io/s/bold-chihiro-bnlw5?file=/src/App.js

Answer 3

在 React 中，您应该将组件视为函数 (state and props) -> elements 牢记这一点，这是您的用例的简单实现。

请注意，Error 始终会被渲染，并且它会对传递给它的 props 值做出反应

import { useState } from "react";
import "./styles.css";

const Error = ({ nameLength, addressLength, yearLength }) => {
  let errorText = "";

  if (nameLength < 4 && addressLength >= 4 && yearLength >= 4) {
    errorText = "error in field name";
  }

  return errorText ? <div>{errorText}</div> : null;
};

export default function App() {
  const [nameValue, setNameValue] = useState("");
  const [addressValue, setAddressValue] = useState("");
  const [yearValue, setYearValue] = useState("");
  return (
    <div className="App">
      <div>
        <input
          name="name"
          placeholder="name"
          value={nameValue}
          onChange={(e) => setNameValue(e.currentTarget.value)}
        />
        <input
          name="address"
          placeholder="address"
          value={addressValue}
          onChange={(e) => setAddressValue(e.currentTarget.value)}
        />
        <input
          name="year"
          placeholder="year"
          value={yearValue}
          onChange={(e) => setYearValue(e.currentTarget.value)}
        />
      </div>
      <Error
        nameLength={nameValue.length}
        addressLength={addressValue.length}
        yearLength={yearValue.length}
      />
    </div>
  );
}

<p> 元素可见性的 ReactJS 问题

ReactJS problem with <p> element visibility

visibility

reactjs