Elemen pilih yang dikontrol reaksi kembali ke opsi pertama

Saya menggunakan React untuk membuat elemen pemilihan yang terkontrol. Aplikasi saya memvalidasi nilai opsi baru yang dipilih oleh pengguna dan kemudian memperbarui nilai tersebut pada elemen. Validasi memerlukan waktu dan perilaku yang saya amati adalah sebagai berikut:

  • Pengguna memilih opsi
  • Elemen mengubah opsi yang dipilih menjadi indeks 0
  • Setelah periode validasi selesai, elemen memperbarui dirinya ke nilai baru

Saya tidak mengerti mengapa elemen kembali ke indeks pertama dan bagaimana cara mencegahnya (kecuali dengan segera menetapkan nilai yang tidak diinginkan dalam aplikasi saya)

Gunakan JSFiddle ini untuk melihat perilaku ini (pilih Opsi2) https://jsfiddle.net/qo39g2j4/

var Select = React.createClass({
  render: function() {
    return (
        <select id="my-select" value={this.props.value} onChange={this.props.onChange}>
            <option value="Option1">Option1</option>
            <option value="Option2">Option2</option>
            <option value="Option3">Option3</option>
        </select>
    );
  }
});

var Wrapper = React.createClass({
    getInitialState: function () {
        return {value: "Option3"};
    },
    onChange: function (event) {
        var value = event.target.value;
        setTimeout(function () {
            this.setState({value: value});
        }.bind(this), 1000); // this simulates the validation period
    },
    render: function () {
        return (
            <Select
                value={this.state.value}
                onChange={this.onChange}/>
        );
    }
});

ReactDOM.render(
    <Wrapper/>,
    document.getElementById("container")
);

reactjs javascript jquery select option
person Amit Fridman    schedule 29.12.2015    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Coba gunakan defaultValue alih-alih value di komponen Select Anda. Atau tambahkan event.preventDefault() di onChange.

person oobgam    schedule 29.12.2015
comment
Mengubah nilai menjadi defaultValue akan menjadikan komponen ini tidak terkontrol sehingga mencegah saya mengubah nilainya jika validasi gagal. event.preventDefault() sepertinya tidak berfungsi di JSFiddle dan aplikasi sebenarnya - person Amit Fridman; 31.12.2015
comment
@AmitFridman mungkin Anda bisa mencoba mengatur state dua kali onChange. sebelum validasi, dan setelah validasi. - person oobgam; 31.12.2015

arrow_upward
0
arrow_downward

Saya mengalami masalah yang sama ketika mengintegrasikan redux-form dalam aplikasi saya, karena ada masalah dalam event handler onBlur, jadi inilah cara saya menanganinya menggunakan komponen reaksi customSelect :

export default class CustomSelect extends Component {
  render() {
    const { children, value, onBlur, ...props } = this.props

    return (
      <select
        {...props}
        onBlur={() => onBlur(value)}
      >
      {children}
      </select>
    )
  }
}

Di sini onBlur eventHandler secara eksplisit dipanggil dengan nilai yang diteruskan, agar tetap dipilih

Validasi di sisi klien atau sisi server juga tidak boleh diwakili oleh batas waktu karena pengguna diperkirakan akan melihat data masukan yang salah dengan pesan validasi jika tidak valid,

Saya kira penerapan Anda berarti bahwa opsi yang dipilih hanya akan terlihat jika valid, yang bukan merupakan pengalaman pengguna terbaik yang dapat Anda miliki, jika itu kasus sebenarnya

Solusi didasarkan pada bug redux-form react-select

person Mohamed Labib    schedule 07.06.2016