Question

我正在这样做：

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>
);

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

Answer 1

要在基于函数的组件中实现状态逻辑，请使用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>
  );

Answer 2

您需要更改状态以触发组件渲染。您可以按照@Dupocas的回答进行操作，也可以尝试在类组件中使用setState，例如：

return (
  <div className="container">
    <select
      onChange={(event) => {
        let { value } = event.target;
        this.setState({
          priceBook: JSON.parse(value).price || 0
        })
      }}
    >
        {planes.map((book, index) => {
          return <option key={index} value={JSON.stringify(book)}>{book.pages}</option>
        })}
    </select>
    <span>Price { this.state.priceBook } </span>
  </div>
);

渲染后更新值

2 个答案: