在 function 中创建 div (React)

Question

我有一个练习，我必须进行输入和按钮。 当我单击按钮时，必须在下面创建一个 div/span，它会打印输入中的文本。 如果我更改输入中的文本，则只有当我再次单击该按钮时，它才必须在该 div/span 中刷新。 我试图用makeDiv function 来做，但它什么也没做。 我制作了console.log(event.target.value)并处理了输入中的文本，但没有任何反应。

我的代码：

import {useState} from "react"
function About() {
    
    const [initialValue,setInitialValue] = useState('')
    const handleValueChange = (event) => {
        console.log(event.target.value)
        setInitialValue(event.target.value)
    }
    const makeDiv = () => {
        return (<div>Value: {initialValue}</div>)
    }
    return(
    <div>
        

        <button onClick={makeDiv}>click me</button>
       <div><input type="text" onChange={handleValueChange} /></div>


    </div>
        )
}
export default About

编辑：

如果我想做一个与此非常相似的练习，但现在，我必须在每次单击按钮时将<li>text in input</li>添加到<ul> 。 所以当我单击按钮时，我在列表中添加了一个li ，我尝试过这样，但它没有编译：

import {useState} from "react"
function About() {
   
   
   

    const [initialValueLastExercise, setInitialValueLastExercise] = useState([])
    const [ValueLE, setValueLE] = useState([])
    const handleValueChangeLE = (event) => {
        console.log(event.target.value)
        setInitialValueLastExercise([...initialValueLastExercise, event.target.value])
    }
    const showListWithText = () => {
        setShouldDisplayText(true)
        setValueLE(initialValueLastExercise)
    }


    return(
    <div>
   

       
        <button onClick={showListWithText}>click me to refresh the list</button>
        <div><input type="text" onChange={handleValueChangeLE} /></div>
        {shouldDisplayText && <div><ul>
            {
                
                for (let i =0; i<initialValueLastExercise.length; i++) {
                <li>{initialValueLastExercise[i]}</li>

                }




        }</div></ul>}


    </div>
        )
}
export default About

Answer 1

正如您在问题中提到的那样，这将刷新按钮单击时 div 的值。

import {useState} from "react"
function App() {
    
    const [initialValue,setInitialValue] = useState('')
    const [displayText, setDisplayText] = useState(false)
    const [Value,setValue] = useState('')
    const handleValueChange = (event) => {
        setInitialValue(event.target.value)
    }
    const showText = () => {setDisplayText(true)
    setValue(initialValue)};
return(
    <div>
       <button onClick={showText}>click me</button>
       <div><input type="text" onChange={handleValueChange} /></div>
       {displayText && <div>Value: {Value}</div>}
    </div>
        )
}
export default App

已编辑问题的解决方案。

import {useState} from "react"
function App() {
    
    const [initialValue,setInitialValue] = useState('')
    const [displayText, setDisplayText] = useState(false)
    const [Value,setValue] = useState([])
    const handleValueChange = (event) => {
        setInitialValue(event.target.value)
    }
    const showText = () => {setDisplayText(true)
    setValue([...Value,initialValue])};
return(
    <div>
       <button onClick={showText}>click me</button>
       <div><input type="text" onChange={handleValueChange} /></div>
       <ul>{displayText && Value.length > 0  && 
         Value.map((i) => {
          return <li>Value: {i}</li>
       })}</ul>
    </div>
        )
      }
export default App

Answer 2

第一种可能性 - 靠近您的代码源

不要忘记将initialValue绑定到输入并将 makeDiv 内容添加到 JSX：

return (
<div>
  <button onClick={makeDiv}>click me</button>
  <input type="text" onChange={handleValueChange} value={initialValue} />
  {makeDiv}
</div>
)

第二种可能性 - 用另一种方法

return (
<div>
  <button onClick={makeDiv}>click me</button>
  <input type="text" onChange={handleValueChange} value={initialValue} />
  {initialValue && <div>{initialValue}</div>}
</div>
)

Answer 3

一种方法是创建另一个 state 变量，该变量指示您尝试制作的div是否应显示然后有条件地呈现。 就像是

import {useState} from "react"
function About() {
    
    const [initialValue,setInitialValue] = useState('')
    const [shouldDisplayText, setShouldDisplayText] = useState(false)
    const handleValueChange = (event) => {
        console.log(event.target.value)
        setInitialValue(event.target.value)
    }
    const showDivWithText = () => setShouldDisplayText(true);
return(
    <div>
        

        <button onClick={showDivWithText}>click me</button>
       <div><input type="text" onChange={handleValueChange} /></div>
       {shouldDisplayText && <div>Value: {initialValue}</div>}


    </div>
        )
}
export default About

Answer 4

你的方法从根本上是错误的。

你应该：

• 将有关组件的所有数据存储在 state 中
• 基于 state 渲染 output

所以：

您需要两个 state 变量：

• currentInputValue（因为您需要在输入中存储要显示和编辑的值）
• selectedValue（因为需要存储要显示在div中的值）

当onChange触发时，用输入的值更新currentInputValue 。

当onClick触发时，用currentInputValue的当前值更新selectedValue

返回数据时，请包括以下内容：

{selectedValue && <div>{selectedValue}</div>}

... 到 output 一个包含所选值的 div 仅当有一个真实值时（默认的空字符串不是真实的，所以 div 不会是 output 然后）