时间戳

首页 > 解决方案 > 渲染后更新值

reactjs - 渲染后更新值

问题描述

我正在这样做：

const changePrice = (event) => {
  let {value} = event.target;
  priceBook = JSON.parse(value).price
}

return (
  <div className="container">
    <select onChange={changePrice}>
        {planes.map((book, index) => {
          return <option key={index} value={JSON.stringify(book)}>{book.pages}</option>
        })}
    </select>
    <span>Price {priceBook} </span>
  </div>
);

它很好地加载了选择器值，但是当我更改值时，我应该更新视图中的价格值，这不会发生。

标签： reactjs

解决方案

要在基于函数的组件中实现有状态逻辑，请使用hooks：

const [priceBook, setPriceBook] = useState('such empty')
const changePrice = (event) => {
    let {value} = event.target;
    const priceBook = JSON.parse(value).price
    setPriceBook(pricebook)
  }

  return (
    <div className="container">
      <select onChange={changePrice}>
          {planes.map((book, index) => {
            return <option key={index} value={book.price}>{book.pages}</option>
          })}
      </select>
      <span>Price {priceBook} </span>
    </div>
  );

推荐阅读