Sự kiện OnChange sử dụng React JS để thả xuống

Question

var MySelect = React.createClass({ 
    change: function(){ 
     return document.querySelector('#lang').value; 
    }, 
    render: function(){ 
     return(
      <div> 
       <select id="lang"> 
        <option value="select" onChange={this.change}>Select</option> 
        <option value="Java" onChange={this.change}>Java</option> 
        <option value="C++" onChange={this.change}>C++</option> 
       </select> 
       <p></p> 
       <p value={this.change}></p> 
      </div> 
     ); 
    } 
}); 

React.render(<MySelect />, document.body); 

Sự kiện onChange không hoạt động.

Answer 1

Sự kiện thay đổi được kích hoạt trên phần tử <select>, không phải là yếu tố <option>. Tuy nhiên, đó không phải là vấn đề duy nhất. Cách bạn đã xác định hàm change sẽ không gây ra sự tái xuất hiện của thành phần. Có vẻ như bạn có thể chưa hoàn toàn nắm bắt được khái niệm Phản ứng, vì vậy có thể "Thinking in React" sẽ giúp bạn.

Bạn phải lưu trữ giá trị đã chọn làm trạng thái và cập nhật trạng thái khi giá trị thay đổi. Việc cập nhật trạng thái sẽ kích hoạt một phần của thành phần.

var MySelect = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'select' 
     } 
    }, 
    change: function(event){ 
     this.setState({value: event.target.value}); 
    }, 
    render: function(){ 
     return(
      <div> 
       <select id="lang" onChange={this.change} value={this.state.value}> 
        <option value="select">Select</option> 
        <option value="Java">Java</option> 
        <option value="C++">C++</option> 
       </select> 
       <p></p> 
       <p>{this.state.value}</p> 
      </div> 
     ); 
    } 
}); 

React.render(<MySelect />, document.body); 

Cũng lưu ý rằng <p> yếu tố không có một thuộc tính value. React/JSX chỉ đơn giản là sao chép cú pháp HTML nổi tiếng, nó không giới thiệu các thuộc tính tùy chỉnh (ngoại trừ key và ref). Nếu bạn muốn giá trị được chọn là nội dung của phần tử <p> thì chỉ cần đặt bên trong nó, giống như bạn sẽ làm với bất kỳ nội dung tĩnh nào.

Tìm hiểu thêm về điều khiển xử lý sự kiện, tiểu bang và hình thức:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

Answer 2

thay thế

// adheres to airbnb syntax 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class Select extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '?', 
     options: [ 
     { 
      name: 'Select…', 
      value: null, 
     }, 
     { 
      name: 'A', 
      value: 'a', 
     }, 
     { 
      name: 'B', 
      value: 'b', 
     }, 
     { 
      name: 'C', 
      value: 'c', 
     }, 
     ], 
    }; 
    } 
    render() { 
    const createItem = (item, key) => 
     <option 
     key={key} 
     value={item.value} 
     > 
     {item.name} 
     </option>; 
    return (
     <div> 
     <select 
      onChange={event => this.setState({ value: event.target.value })} 
      value={this.state.value} 
     > 
      {this.state.options.map(createItem)} 
     </select> 
     <h1>Favorite letter: {this.state.value}</h1> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Select />, document.body);