reactjs - 在反应状态数组中保存最新的字符串值
问题描述
我有一个包含多个文本框的反应表单。我试图在单击按钮时获取所有文本框的值。为此,我使用了一系列状态。这是我的状态,它是一个对象数组:
const [myState, setMyState] = useState([{
stringValue: {
name: "",
value: ""
},
}])
这是我的文本字段:
<TextField
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setMyState([...myState, {
stringValue: {
name: displayName,
value: e.target.Value
}
},])}
/>
单击按钮时,我想获取所有文本框的值,但由于我使用的是状态数组,所以我的myState
数组看起来像这样:
h
he
hel
hell
hello
如果我不使用状态数组,我最终会覆盖状态。我怎样才能将完整的字符串“hello”保存到myState
而不是所有单个字符?
解决方案
您不需要数组来保存和检索表单中所有输入字段的值。
不要使用数组,而是使用对象文字来保存表单中所有输入字段的值。您的状态可能具有以下结构
const [data, setData] = useState({
input1: '',
input2: '',
input3: ''
});
并使每个输入字段 a controlled component
,这意味着它的值将由组件的状态驱动。
这样,您可以访问所有字段的值并仅使用单个onChange
事件处理程序更新输入字段的值。
const handleChange = (event) => {
const { name, value } = event.target;
setData({ ...data, [name]: value });
};
以下代码片段显示了一个示例:
function App() {
const [data, setData] = React.useState({
input1: "",
input2: "",
input3: ""
});
const handleChange = (event) => {
const { name, value } = event.target;
setData({ ...data, [name]: value });
};
return (
<div>
<input
type="text"
name="input1"
value={data.input1}
onChange={handleChange}
/>
<input
type="text"
name="input2"
value={data.input2}
onChange={handleChange}
/>
<input
type="text"
name="input3"
value={data.input3}
onChange={handleChange}
/>
<br />
{JSON.stringify(data)}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
input { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
编辑:
如果要动态创建输入字段,则可以使用数组或代表不同输入字段的对象动态创建输入字段form
。
以下代码片段显示了一个示例:
function App() {
const [data, setData] = React.useState({
input1: { type: "text", value: "", name: "input1" },
input2: { type: "text", value: "", name: "input2" },
input3: { type: "text", value: "", name: "input3" }
});
const handleChange = (event) => {
const { name, value } = event.target;
setData({ ...data, [name]: { ...data[name], value } });
};
return (
<div>
{Object.keys(data).map((k) => {
const { type, value, name } = data[k];
return (
<input
key={k}
type={type}
value={value}
name={name}
onChange={handleChange}
/>
);
})}
<br />
{/* just for demo */}
{Object.keys(data).map((k) =>
JSON.stringify({ name: data[k].name, value: data[k].value })
)}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
input { display: block; margin: 8px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- java - Mysql插入重复键更新需要很长时间
- spring-boot - Spring Boot 微服务不适用于 Intelij IDEA
- r - 使用 r 合并和提取日期和时间
- android - Firebase Auth 有时无法在移动 Chrome 应用程序上呈现登录弹出窗口
- python - 我应该如何解决以下tensorflow包错误?
- android - DayLight 主题中的颜色是什么?
- java - 在这个问题中设置“临时”变量的目的是什么?
- scala - 为什么对不存在(未选择)的列进行过滤?
- javascript - 谁能告诉我当鼠标被按下时如何触发一个函数并继续直到它在 p5.js 中被释放
- database - AWS EC2 - 从特定域到数据库的安全连接?