[英]how to update input text which is render by array map in REACTJS
const data = [
{
title: "Hello World",
company: [
"Google",
"Apple",
"Facebook"
]
}
];
class App extends React.Component {
render() {
return (
<ul>
{data[0].company.map((item, index) => (
<input type="text" key={index} value={item}></input>
))}
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
it renders perfectlly but when i am trying to edit its not editing the text. 它完美地呈现,但是当我尝试编辑它而不是编辑文本时。 (not editable) and if i add one more input to same array with blank area value it also not working (not updated). (不可编辑),并且如果我向空白区域值相同的数组中再添加一个输入,它也将无法正常工作(无法更新)。
You should use state and controlled components for this. 您应该为此使用状态和受控组件 。 I strongly recommend you actually go through React's main concepts that are displayed to the right on their website as it will make your development process much easier. 我强烈建议您实际阅读React的主要概念,这些主要概念会在其网站的右侧显示,因为这将使您的开发过程更加轻松。
To apply the controlled component principle to your current code, you need to have an onChange event bound to your input: 要将受控组件原理应用于当前代码,您需要将onChange事件绑定到您的输入:
class App extends React.Component {
state = {
title: "Hello World",
companies: [
"Google",
"Apple",
"Facebook"
],
};
updateCompany(newName, index) {
const { companies } = this.state;
const newCompanies = [...companies];
newCompanies[index] = newName;
this.setState({ companies: newCompanies });
}
render() {
const { companies } = this.state;
return (
<ul>
{companies.map((item, index) => (
<input type="text" key={index} value={item} onChange={(e) => this.updateCompany(e.target.value, index)}></input>
))}
</ul>
);
}
}
Try the following code: 尝试以下代码:
const data = [ {
title: "Hello World",
company: [
"Google",
"Apple",
"Facebook"
]
}
];
class App extends React.Component {
handleChange = (e) => {
const target = e.target;
const value = target.value;
const name = target.name;
data[0].company[+name] = value
}
render() {
return (
<ul>
{data[0].company.map((item, index) => (
<input type="text" onchange={this.handleChange} name={""+index} key={index} value={item}></input>
))}
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
I transform the index into input name and listen to the change on the input and I transform the index to an integer to replace the value in the array 我将索引转换为输入名称,并听取输入上的更改,然后将索引转换为整数以替换数组中的值
Try the following :) 尝试以下方法:)
class App extends React.Component {
state = {
companies: data[0].company,
};
updateText = (e, index) => {
const companies = [...this.state.companies];
companies[index] = e.target.value
this.setState({ companies });
}
render() {
return (
<ul>
{this.state.companies.map((item, index) => (
<input
type="text"
value={item}
onChange={(e) => this.updateText(e, index)}
/>
))}
</ul>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.