如何在React中访问对象内部数组
如何在React中访问对象内部数组
提问于 2020-01-24 07:21:48
const [new, setNew] = useState(
{
"student":
[
{
name:"",
age: ""
}
]
}
);我如何在数组中设置状态对象，我也想把我的输入传递给这个数组，我使用了react钩子。
下面是我的句柄更改函数：
const handleChange = (event) => {
//my text editor output
const data = event.target.getContent();
setNew({ ...new.student, summary: data });
console.log(event);
};回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-24 08:23:11
const App = () => {
const [objectArray, setObjectArray] = React.useState({
students: [
{
name: "",
age: ""
},
{
name: "",
age: ""
},
{
name: "",
age: ""
}
]
});
const handleChange = (index, name, value) => {
console.log("changed - ", index, name, value);
const updated = {...objectArray};
updated.students[index][name] = value;
setObjectArray(updated);
};
return (
<div className="container">
<div className="row row-cols-2">
<div className="col">
{objectArray.students.map((s, i) => (
<div className="form-group">
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic">
Name
</span>
</div>
<input
type="text"
className="form-control"
value={s.name}
onChange={e => handleChange(i, "name", e.target.value)}
placeholder="Name"
aria-label="Name"
aria-describedby="basic"
/>
</div>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic">
Age
</span>
</div>
<input
type="text"
className="form-control"
value={s.age}
onChange={e => handleChange(i, "age", e.target.value)}
placeholder="Age"
aria-label="Age"
aria-describedby="basic"
/>
</div>
</div>
))}
</div>
<div className="col">{JSON.stringify(objectArray, null, 2)}</div>
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Stack Overflow用户
发布于 2020-01-24 07:29:28
setNew({student: [ ...new.student, {summary: data }]});你想做这样的smt吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59892027
复制相关文章
相似问题
如何在kafka连接jdbc中重写key.serializer
找不到类，找不到类定义
卡夫卡制片人抛出"key.serializer“异常
找不到GoogleMaps类-找不到类‘laravel’
使用事务时，每个生产者的key.serializer不同
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
