javascript - 如何修复钩子以在 React JS 中设置状态?
问题描述
我试图让用户设置一个带有输入数字的函数变量。我有一个表格,他们输入了一个数字,需要将col const 设置在顶部。
到目前为止,我正在使用一个简单的钩子,并且正在设置 col (我在控制台记录了它),但它没有产生所需的数组。我认为它在代码底部的切换中搞砸了。
function DataFrame(){
const [toggle, setToggle] = React.useState(false);
const [col, setCol] = useState(0)
var element = <li class="element"/>
var row = 3
var arr = []
var i
for (i = 0; i<row; i++){
arr.push(element)
}
const Element = () => <li className="element" />;
console.log(col)
return (
<div>
<div >
<div style={{fontFamily:'PressStart2P',opacity:'45%', width:'360px',
position:'absolute',left:'36px', top: '160px',color:'rgb(143, 0, 145)'}}>
</div>
<div >
<h1 class="dfHeader" style={{left:'30px'}}>
DataFrames :<br></br></h1>
<h1 class='dfHeader2'style={{top:'150px',left:'30px'}}>
constructor</h1>
<div class="codeBorder" style={{scrollbarColor:'#6a00ff'}}>
<div class="textbox" style={{width:'180px'}}>
<p class="instructions"></p>
<p class="instructions2"></p>
<p class="instructions3">
<form class="codeForm">
<label>
enter dimensions:
<input type="number" name="dimension" onKeyUp=
{e => setCol(e.target.value)} />
</label>
<input class='goButton' type="submit" value="run" />
</form>
<br/><br/></p>
<p class="instructions3">
<form class="codeForm">
<label>
input code:
<input type="number" name="dimension" />
</label>
<input class='goButton' type="submit" value="run" />
</form></p>
<p class="instructions3">
<form class="codeForm">
<label>
input code:
<input type="number" name="dimension" />
</label>
<input class='goButton' type="submit" value="run" />
</form></p>
<p class="instructions3">
<form class="codeForm">
<label>
input code:
<input type="number" name="dimension" />
</label>
<input class='goButton' type="submit" value="run" />
</form> </p>
</div>
</div>
<div class="btnConsole">
<button class="dfButton" onClick={()=>setToggle( (prev) => (!prev) )}>
</button>
</div>
</div>
<div class="monitor"style={{}}>
<div class="superScreen">
<div class="screenDiv" >
<div id="subScreen" class="subScreen">
{[...Array(col).keys()].map(ul => (
<ul key={ul}>
{toggle &&
[...Array(row).keys()].map(
li => <Element key={li} />)}
</ul>
))}
</div>
</div>
</div>
</div>
<br/>
</div>
</div>
)
}
export default DataFrame;
ReactDOM.render(<DataFrame />, document.getElementById('root'));
一如既往地感谢任何帮助!
解决方案
onKeyUp={e => setCol(e.target.value)}
这是你的问题的原因。e.target.value
是一个字符串,你设置col
等于 a string
。因此,[...Array(col).keys()]
给你一个长度为 1 的数组。
const col = '5';
console.log([...Array(col).keys()]);
改变
onKeyUp={e => setCol(e.target.value)}
至
onKeyUp={e => setCol(Number(e.target.value))}
推荐阅读
- r - 警告:loadNamespace 中的错误:没有名为“leafletsector”的包
- javascript - 同一个 iframe 中的 Typeform 和 Calendly 重定向
- javascript - postgres groupby 的节点 orm 未提供分组结果集
- java - 为什么我会使用 slf4j-api-1.6.1.jar 获得 FileNotFoundException?
- jpa - Jpa将user_group的外键添加到实体MessageRecipient
- php - 为多个位置生成报告
- stanford-nlp - 我可以从斯坦福 CoreNLP 中的 TokensRegex 匹配结果中获得 entityMention 吗?
- tfs - TFS 合并分支获取冲突的文件和提交
- javascript - 社交登录禁用按钮样式 web
- javascript - 流星反应应用程序的座位预订逻辑