Bereaksi JSX: memilih "terpilih" pada opsi <select> yang dipilih

Dalam komponen Bereaksi untuk <select>menu, saya perlu mengatur selectedatribut pada opsi yang mencerminkan keadaan aplikasi.

Di render(), optionStatediteruskan dari pemilik negara ke komponen SortMenu. Nilai opsi diteruskan sebagai propsdari JSON.

render: function() {
  var options = [],
      optionState = this.props.optionState;

  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';

    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });

// pass {options} to the select menu jsx

Namun itu memicu kesalahan sintaks pada kompilasi JSX.

Melakukan hal ini akan menghilangkan kesalahan sintaksis tetapi jelas tidak menyelesaikan masalah:

var selected = (optionState === option.value) ? 'selected' : 'false';

<option value={option.value} selected={selected}>{option.label}</option>

Saya juga mencoba ini:

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

Apakah ada cara yang disarankan untuk menyelesaikan ini?

Bereaksi secara otomatis memahami boolean untuk tujuan ini, jadi Anda cukup menulis (catatan: tidak disarankan)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

dan itu akan menampilkan 'dipilih' dengan tepat.

Namun, Bereaksi membuat ini lebih mudah bagi Anda. Alih-alih mendefinisikan selectedpada setiap opsi, Anda dapat (dan seharusnya) cukup menulis value={optionsState}pada tag pilih itu sendiri :

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Untuk info lebih lanjut, lihat Bereaksi pilih tag doc .

Anda dapat melakukan apa yang Bereaksi memperingatkan Anda ketika Anda mencoba mengatur properti "terpilih" dari <option>:

Gunakan defaultValueatau valuealat peraga pada <select>bukannya pengaturan selectedaktif <option>.

Jadi, Anda dapat menggunakan options.valuepada pilihan defaultValueAnda

Berikut ini adalah solusi lengkap yang menggabungkan jawaban terbaik dan komentar di bawahnya (yang mungkin membantu seseorang yang kesulitan untuk menyatukan semuanya):

UPDATE FOR ES6 (2019) - menggunakan fungsi panah dan perusakan objek

dalam komponen utama:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

termasuk komponen (yang sekarang menjadi fungsional stateless):

export const ReactExample = ({ name, value, handleChange }) => (
  <select name={name} value={value} onChange={handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

JAWABAN SEBELUMNYA (menggunakan ikatan):

dalam komponen utama:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

termasuk komponen (yang sekarang menjadi fungsional stateless):

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

komponen utama mempertahankan nilai yang dipilih untuk buah (dalam keadaan), komponen yang disertakan menampilkan elemen yang dipilih dan pembaruan dikembalikan ke komponen utama untuk memperbarui keadaannya (yang kemudian memutar kembali ke komponen yang disertakan untuk mengubah nilai yang dipilih).

Perhatikan penggunaan prop nama yang memungkinkan Anda untuk mendeklarasikan metode handleChange tunggal untuk bidang lain pada formulir yang sama terlepas dari jenisnya.

Berikut ini contoh terbaru cara melakukannya. Dari bereaksi docs , ditambah sintaks metode "lemak-panah" yang mengikat secara otomatis.

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

Cukup tambahkan sebagai opsi pertama dari tag pilihan Anda:

<option disabled hidden value=''></option>

Ini akan menjadi default dan ketika Anda akan memilih opsi yang valid akan ditetapkan pada negara Anda

***Html:***
<div id="divContainer"></div>

var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
var selectedColor = 'Green';

ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (
        <div>            
            <DropDown data={colors} Selected={selectedColor}></DropDown>
        </div>);
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select value={this.props.Selected}>
            {
                items.map(function (item) {
                    return <option value={item.Name }>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select>
            {
                items.map(function (item) {
                    return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (
            <select>
                {
                    items.map(function (item) {

                                            if (selectedItem == item.Name)
                    return <option value={item.Name } selected>{item.Name}</option>;
                else
                    return <option value={item.Name }>{item.Name}</option>;
                    })
                }
            </select>);
        }
    });

Saya punya masalah dengan <select>tag yang tidak diperbarui ke yang benar <option>ketika kondisi berubah. Masalah saya tampaknya adalah bahwa jika Anda membuat dua kali berturut-turut, pertama kali tanpa pra-pilih <option>tetapi kedua kalinya dengan satu, maka <select>tag tidak memperbarui pada render kedua, tetapi tetap pada default pertama.

Saya menemukan solusi untuk ini menggunakan referensi . Anda perlu mendapatkan referensi ke <select>simpul tag Anda (yang mungkin bersarang di beberapa komponen), dan kemudian secara manual memperbarui valueproperti di dalamnya, di componentDidUpdatehook.

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}

Posting jawaban yang serupa untuk MULTISELECT / optgroups:

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}

Saya punya solusi sederhana mengikuti dasar HTML.

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide adalah kelas bootstrap, jika Anda tidak menggunakan bootstrap, inilah Anda:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Saya mengatasi masalah serupa dengan mengatur defaultProps:

ComponentName.defaultProps = {
  propName: ''
}

<select value="this.props.propName" ...

Jadi sekarang saya menghindari kesalahan pada kompilasi jika prop saya tidak ada sampai pemasangan.