Question

我有一个数据列表，正在尝试获取单击按钮时当前选择的值。我完全按照Stack Overflow上的其他帖子的建议进行了操作，但似乎不起作用。在我的代码中，您可以看到我尝试过的内容。它只是保持注销未定义。当我记录长度时，它确实正确注销了5个选项，这是我的HTML代码

<form>
     <input list="slots" name="slot"></input>
     <datalist id="slots">
           {
            this.state.slots.map((slot) => <option value={slot.id} >{slot.start_time} - {slot.end_time}</option>)
           }
      </datalist>
      <Button onClick={() => {this.handleAddFacilitator()}}>Submit</Button>
</form>

这是方法：

 handleAddFacilitator(e) {
  console.log($('#slots').val(), "slotID")
  console.log(document.getElementById('slots').value, "second slot")
  console.log(document.getElementById("slots").options.length, "LENGTH")
 }

Answer 1

让我们说您有一个选择引用类型

<select ref="slotType">
  <option value="01">one</option>
  <option value="02">two</option>
  <option value="03">three</option>
</select>

您的按钮条目

<Button onClick={this.handleAddFacilitator}>Submit</Button>

handleAddFacilitator() {
  if (this.refs.slotType) {
    console.log("selected option ==>",this.refs.imageType.value);
  }
}

另一种方式：

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'PNG'
    };
    this.handleChange = this.handleChange.bind(this);
    this.print = this.print.bind(this);
  }

  print() {
    if (this.state.value) {
      console.log(this.state.value);
    }
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div>
        <select ref="slotType" onChange={this.handleChange}>
      <option value="01">one</option>
      <option value="02">two</option>
      <option value="03">three</option>
    </select>
<Button onClick={this.print}>Submit</Button>
      </div
    );
  }
}

Answer 2

选择发生在输入元素中，而不是数据列表中。您需要给输入一个ID

<input list="slots" name="slot" id="slotsInput"></input>

并在那里查询值：

console.log($('#slotsInput').val(), "slotID")

另请参见：Get selected value in datalist using jQuery

无法获取数据列表的选定值

2 个答案: