Javascript 在函数中创建div（React）

我有一个练习，在那里我必须做一个输入和一个按钮。单击按钮时，必须在下面创建一个div/span，用于打印输入中的文本。如果我更改了输入中的文本，则只有在再次单击按钮时，才会刷新该div/span中的文本。我试着用

makeDiv

函数来实现它，但它什么都没做。我制作了

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

---

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

不要忘记将

initialValue

绑定到输入，并将makeDiv内容添加到JSX：

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

返回(
点击我
{makeDiv}
)

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

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

返回(
点击我
{initialValue&&{initialValue}}
)

一种方法是创建另一个状态变量，该变量指示是否应显示您尝试创建的

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

从“react”导入{useState}
函数About（）{
常量[initialValue，setInitialValue]=useState（“”）
常量[shouldDisplayText，setShouldDisplayText]=useState（false）
const handleValueChange=（事件）=>{
console.log（event.target.value）
setInitialValue（event.target.value）
}
const showdivithtext=（）=>setShouldDisplayText（true）；
返回(
点击我
{shouldDisplayText&&Value:{initialValue}}
)
}
导出默认值关于

你的方法根本上是错误的

你应该：

• 存储状态下有关组件的所有数据
• 根据状态渲染输出

因此：

您需要两个状态变量：

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

当触发

onChange

时，使用输入值更新

currentInputValue

当触发

onClick

时，使用当前值

currentInputValue

更新

selectedValue

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

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

{selectedValue&&{selectedValue}

---

…若要仅在存在truthy值时输出包含选定值的div（默认空字符串不是truthy，因此该div将不会被输出）

这将仅在单击按钮时刷新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

从“react”导入{useState}
函数App（）{
常量[initialValue，setInitialValue]=useState（“”）
const[displayText，setDisplayText]=useState（false）
const[Value，setValue]=useState（“”）
const handleValueChange=（事件）=>{
setInitialValue（event.target.value）
}
const showText=（）=>{setDisplayText（true）
设置值（初始值）}；
返回(
点击我
{displayText&&Value:{Value}
)
}
导出默认应用程序

已编辑问题的解决方案。

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

从“react”导入{useState}
函数App（）{
常量[initialValue，setInitialValue]=useState（“”）
const[displayText，setDisplayText]=useState（false）
常量[Value，setValue]=useState（[]）
const handleValueChange=（事件）=>{
setInitialValue（event.target.value）
}
const showText=（）=>{setDisplayText（true）
setValue（[…Value，initialValue]）；
返回(
点击我
{displayText&&Value.length>0&&
Value.map（（i）=>{
返回
值：{i}
})}
)
}
导出默认应用程序

makeJSX它没有改变任何东西：/I即使我刚刚做了更新？它现在也无法编译-那是什么

makeJSX

？很抱歉，它是

makeDiv

它不能正常工作，因为当我们在输入中更改文本时，它会立即刷新div-只有在我单击按钮时才会刷新它。对不起，我没有正确阅读问题的描述。在这种情况下，只需保留需要显示在

div

中的文本的另一个状态变量，而不是保留是否应显示该文本的变量，并且每次单击按钮时更新它（不是调用变量

currentlyDisplayedText

，而是调用变量

currentlyDisplayedText

，每当你点击按钮时，函数应该是

（）=>setCurrentlyDisplayedText（initialValue）

我编辑了我的文章，因为我有另一个非常类似的练习，但它又不想编译。）

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