javascript - 如何在表格中的 react js 中添加下拉列表？

Question

var ListItem = React.createClass({ displayName: "ListItem",
  getInitialState: function () {
    return {fruit: this.props.value.product.fruit, meat: this.props.value.product.meat, vegetable: this.props.value.product.vegetable, total: 0 };
  },



render: function () {
    return (
      React.createElement("tr", null, 
      React.createElement("td", null, React.createElement("input", { type: "text", name: "fruit", value: this.state.fruit, onChange: this.handleChange, placeholder: "fruit" })), 
      React.createElement("td", null, React.createElement("input", { type: "number", name: "meat", value: this.state.meat, onChange: this.handleChange, placeholder: "..." })), 
      React.createElement("td", null, React.createElement("input", { type: "number", name: "vegetable", value: this.state.vegetable, onChange: this.handleChange, placeholder: "..." })), 
      React.createElement("td", { className: "total" }, this.state.total)));
  },

现在我想用下拉选项将水果、肉类和蔬菜更改为“形式”而不是“输入”，所以当我点击水果时，我将有“苹果、香蕉、草莓”的下拉选项。肉类选择将是“猪肉，牛肉，羊肉”等......

我试过使用

return React.createElement("select", {},
  React.createElement("option", {value: "A"}, "Option A"),
  React.createElement("option", {value: "B"}, "Option B"),
  React.createElement("option", {value: "C"}, "Option C")
);

但它不起作用:(

标签： javascriptreactjsdrop-down-menudropdown