处理具有相同状态值的输入
处理具有相同状态值的输入
提问于 2018-06-06 02:00:16
我正在构建一个购物车应用程序，我遇到了一个问题，我的所有输入都有相同的状态值。一切都很好，但当我在一个输入框中输入时，它在我所有其他输入中都是一样的。
我尝试在输入中添加一个name字段，并将我的初始状态设置为undefined，这很好用，但是数字没有通过。
当输入具有相同的状态值时，我们如何处理不同的输入？或者这是不可能的/愚蠢的做法？
class App extends Component {
state = {
items: {
1: {
id: 1, name: 'Yeezys', price: 300, remaining: 5
},
2: {
id: 2, name: 'Github Sweater', price: 50, remaining: 5
},
3: {
id: 3, name: 'Protein Powder', price: 30, remaining: 5
}
},
itemQuantity: 0
},
render() {
return (
<div>
<h1>Shopping Area</h1>
{Object.values(items).map(item => (
<div key={item.id}>
<h2>{item.name}</h2>
<h2>$ {item.price}</h2>
{item.remaining === 0 ? (
<p style={{ 'color': 'red' }}>Sold Out</p>
) : (
<div>
<p>Remaining: {item.remaining}</p>
<input
type="number"
value={ itemQuantity }
onChange={e => this.setState({ itemQuantity: e.target.value})}
placeholder="quantity"
min={1}
max={5}
/>
<button onClick={() => this.addItem(item)}>Add To Cart</button>
</div>
)}
</div>
))}
</div>
)
}
}回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-06 02:44:55
这是一个解决方案，问题被松散地解释，但它确实可以在不创建另一个组件的情况下工作。正如您所知道的，您需要分隔购物车中每个项目的状态。我通过动态初始化和设置每个项目的数量状态来做到这一点。您可以通过以下示例查看状态更改：
class App extends React.Component {
constructor(props) {
super(props);
this.state = { quantities: {} }
}
componentDidMount() {
let itemIDs = ['1', '2', '3', 'XX']; //use your own list of items
itemIDs.forEach(id => {
this.setState({quantities: Object.assign(this.state.quantities, {[id]: 0})});
})
}
render() {
let list = Object.keys(this.state.quantities).map(id => {
return (
<div>
<label for={id}>Item {id}</label>
<input
id={id}
key={id}
type="number"
value={this.state.quantities[id]}
onChange={e => {
this.setState({quantities: Object.assign(this.state.quantities, {[id]: e.target.value})})
}}
/>
</div>
);
})
return (
<div>
{list}
<div>STATE: {JSON.stringify(this.state)}</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
您可以根据自己的喜好修改状态结构。
Stack Overflow用户
发布于 2018-06-06 02:12:34
如果对所有输入使用相同的状态键，则所有输入将从一个位置获取值并更新到一个位置。为了避免这种情况，你必须使用单独的状态。我猜想您正在尝试显示条目列表的输入。
要实现这一点，您可以为列表项创建组件，并在列表项组件中保留状态。因为每个组件都有自己的状态，所以状态值不会冲突。
下面是一个例子
class CardItem extends Component {
state = {
number: 0
}
render() {
render (
<input type="text" value={this.state.number} onChange={e => this.setState({ number: e.target.value })} />
)
}
}
class Main extends Component {
render () {
const list = [0,1,2,3,4]
return (
list.map(item => <CardItem data={item} />)
)
}
}Stack Overflow用户
发布于 2018-06-06 02:21:37
以下是我通常处理这种情况的方式。你说你得到了一个项目数组？每个item对象都应该包含一个键来存储值(在我的示例中是count)。可以使用通用onChange处理程序更新数组中的单个项。所以现在，您的状态是管理项目列表，而不是每个单独的输入值。这使得您的组件更加灵活，并且能够在不更改代码的情况下处理任意数量的项：
const itemData = [
{ id: 0, count: 0, label: 'Number 1' },
{ id: 1, count: 0, label: 'Number 2' },
{ id: 2, count: 0, label: 'Number 3' },
{ id: 3, count: 0, label: 'Number 4' }
];
class App extends React.Component {
state = {
items: itemData
}
handleCountChange = (itemId, e) => {
// Get value from input
const count = e.target.value;
this.setState( prevState => ({
items: prevState.items.map( item => {
// Find matching item by id
if(item.id === itemId) {
// Update item count based on input value
item.count = count;
}
return item;
})
}))
};
renderItems = () => {
// Map through all items and render inputs
return this.state.items.map( item => (
<label key={item.label}>
{item.label}:
<input
type="number"
value={item.count}
onChange={this.handleCountChange.bind(this, item.id)}
/>
</label>
));
};
render() {
return (
<div>
{this.renderItems()}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));label {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50706285
复制相关文章
相似问题
腾讯云开发者
