首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >处理具有相同状态值的输入

处理具有相同状态值的输入
EN

Stack Overflow用户
提问于 2018-06-06 02:00:16
回答 4查看 158关注 0票数 0

我正在构建一个购物车应用程序,我遇到了一个问题,我的所有输入都有相同的状态值。一切都很好,但当我在一个输入框中输入时,它在我所有其他输入中都是一样的。

我尝试在输入中添加一个name字段,并将我的初始状态设置为undefined,这很好用,但是数字没有通过。

当输入具有相同的状态值时,我们如何处理不同的输入?或者这是不可能的/愚蠢的做法?

代码语言:javascript
复制
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>
    )
  }
}
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-06-06 02:44:55

这是一个解决方案,问题被松散地解释,但它确实可以在不创建另一个组件的情况下工作。正如您所知道的,您需要分隔购物车中每个项目的状态。我通过动态初始化和设置每个项目的数量状态来做到这一点。您可以通过以下示例查看状态更改:

代码语言:javascript
复制
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'));
代码语言:javascript
复制
<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>

您可以根据自己的喜好修改状态结构。

票数 1
EN

Stack Overflow用户

发布于 2018-06-06 02:12:34

如果对所有输入使用相同的状态键,则所有输入将从一个位置获取值并更新到一个位置。为了避免这种情况,你必须使用单独的状态。我猜想您正在尝试显示条目列表的输入。

要实现这一点,您可以为列表项创建组件,并在列表项组件中保留状态。因为每个组件都有自己的状态,所以状态值不会冲突。

下面是一个例子

代码语言:javascript
复制
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} />)
        )
    }
}
票数 3
EN

Stack Overflow用户

发布于 2018-06-06 02:21:37

以下是我通常处理这种情况的方式。你说你得到了一个项目数组?每个item对象都应该包含一个键来存储值(在我的示例中是count)。可以使用通用onChange处理程序更新数组中的单个项。所以现在,您的状态是管理项目列表,而不是每个单独的输入值。这使得您的组件更加灵活,并且能够在不更改代码的情况下处理任意数量的项:

代码语言:javascript
复制
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'));
代码语言:javascript
复制
label {
  display: block;
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50706285

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档