javascript 在将input标记中的值传递给另一个节之后，我无法在react中编辑该输入

voase2hg 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(120)

我将一个值从一个input标签传递到另一个input标签，它们位于不同的独立部分。传递值之后，我无法编辑我传递值的输入。下面是错误：

您为表单字段提供了一个value属性，而没有onChange处理程序。这将呈现一个只读字段。如果字段应该是可变的，则使用defaultValue。否则，设置onChange或readOnly。

我得到了值，但我不能编辑输入！
代码如下：
App.js

import React from 'react';
import { useState } from 'react';
import { StartingSection } from './components/StartingSection';
import { CustomizerSection } from './components/CustomizerSection';

function App() {
  const [checkSection, setSection] = useState(false);
  const showCustomizerSection = () => setSection(true);

  const [Width, setWidth] = useState();
  const [Length, setLength] = useState();
  
  return (
    <div className="App">
        {checkSection ? 
            <CustomizerSection 
              Width={Width} 
              Length={Length}
            /> 
          : 
            <StartingSection 
              Width={Width}
              setWidth={setWidth}
              Length={Length}
              setLength={setLength}
              onClick={showCustomizerSection}  
            />
          }
    </div>
  );

字符串
StartingSection.jsx

export function StartingSection({onClick, Width, setWidth, Length, setLength}) {
    return(
        <div>
            <input type="number" value={Width || ''} onChange={event => setWidth(event.target.value)} />
            <input type="number" value={Length || ''} onChange={event => setLength(event.target.value)} />
            <button className="button w-100" onClick={onClick}>Continue</button>
        </div>
    )
}

型
CustomizerSection.jsx
我将值传递给这个部分，此时发生了我上面指出的错误。

export function CustomizerSection({Width, Length}) {
    
    return(
        <div>         
           <input type="number" value={Width} /> <=== this is where I pass the value
           <input type="number" value={Length} /> <=== this is where I pass the value
        </div>
    )
}

型
有什么问题吗？谢谢！

JavaScript

来源：https://stackoverflow.com/questions/77744689/after-passing-the-value-in-the-input-tag-to-another-section-i-cant-edit-that-i

1条答案

按热度按时间

oiopk7p51#

在我看来，错误消息正确地识别了这种情况。例如，您正在绑定Width的值，但一旦设置了Width，您就不允许任何更改。
我不知道你在哪里使用setSection，但它看起来好像一旦使用StartingSection，然后显示CustomizerSection。然而，一旦显示CustomizerSection，它就不能使用setWidth或setLength来改变值。这导致了你得到一个只读文本框的情况（由于值的单向绑定）。
如果您想使用StartingSection作为初始值，然后更改它们，则需要为新的CustomizerSection值管理单独的状态：

function App() {
  const [checkSection, setSection] = useState(false);
  const showCustomizerSection = () => setSection(true);

  const [Width, setWidth] = useState();
  const [Length, setLength] = useState();

  const [customizedWidth, setCustomizedWidth] = useState(Width);
  const [customizedLength, setCustomizedLength] = useState(Length);
  
  return (
    <div className="App">
        {checkSection ? 
            <CustomizerSection 
              Width={customizedWidth}
              setWidth={setCustomizedWidth}
              Length={customizedLength}
              setLength={setCustomizedLength}
            /> 
          : 
            <StartingSection 
              Width={Width}
              setWidth={setWidth}
              Length={Length}
              setLength={setLength}
              onClick={showCustomizerSection}  
            />
          }
    </div>
  );

字符串
对CustomizerSection的更改：

export function CustomizerSection({Width, Length, setWidth, setLength}) {
    
    return(
        <div>         
           <input type="number" value={Width} onChange={event => setWidth(event.target.value)} /> 
           <input type="number" value={Length} onChange={event => setHeight(event.target.value)} />
        </div>
    )
}

型

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 在将input标记中的值传递给另一个节之后，我无法在react中编辑该输入

1条答案

相关问题

热门标签

最新问答