React JSX: การเลือก“ ถูกเลือก” ในตัวเลือก <select> ที่เลือก

ในส่วนประกอบ React สำหรับ<select>เมนูฉันต้องตั้งค่าแอselectedททริบิวในตัวเลือกที่สะท้อนถึงสถานะแอปพลิเคชัน

ในrender()ที่optionStateถูกส่งผ่านจากเจ้าของรัฐเพื่อองค์ประกอบ SortMenu ค่าตัวเลือกจะถูกส่งผ่านเป็นpropsจาก 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

อย่างไรก็ตามที่ก่อให้เกิดข้อผิดพลาดทางไวยากรณ์ในการรวบรวม JSX

การทำเช่นนี้เป็นการกำจัดข้อผิดพลาดทางไวยากรณ์ แต่เห็นได้ชัดว่าไม่ได้แก้ปัญหา:

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

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

ฉันก็ลองทำเช่นนี้:

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

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

มีวิธีแนะนำในการแก้ปัญหานี้หรือไม่?

ตอบสนองอัตโนมัติเข้าใจบูลีนเพื่อจุดประสงค์นี้ดังนั้นคุณสามารถเขียนได้(หมายเหตุ: ไม่แนะนำ)

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

และมันจะแสดงผล 'เลือก' อย่างเหมาะสม

อย่างไรก็ตาม React ทำให้สิ่งนี้ง่ายยิ่งขึ้นสำหรับคุณ แทนที่จะกำหนดselectedแต่ละตัวเลือกคุณสามารถ (และควร) เขียนvalue={optionsState}บนแท็กเลือกเอง :

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

สำหรับข้อมูลเพิ่มเติมให้ดูที่แท็กเลือกตอบกลับ

คุณสามารถทำสิ่งที่ตอบสนองเตือนคุณเมื่อคุณพยายามตั้งค่าคุณสมบัติ "เลือก" ของ<option>:

ใช้defaultValueหรือvalueอุปกรณ์ประกอบฉากใน<select>แทนของการตั้งค่าบนselected<option>

ดังนั้นคุณสามารถใช้options.valueในการdefaultValueเลือกของคุณ

ต่อไปนี้เป็นคำตอบที่สมบูรณ์ซึ่งรวมคำตอบที่ดีที่สุดและความคิดเห็นไว้ด้านล่าง (ซึ่งอาจช่วยให้ใครบางคนพยายามรวมเข้าด้วยกัน)

อัพเดตสำหรับ ES6 (2019) - การใช้ฟังก์ชั่นลูกศรและการทำลายวัตถุ

ในองค์ประกอบหลัก:

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} />
    )
  }

}

ส่วนประกอบที่รวมอยู่ (ซึ่งขณะนี้เป็นฟังก์ชันไร้สัญชาติ):

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>
)

คำตอบก่อนหน้า (ใช้การผูก):

ในองค์ประกอบหลัก:

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} />
    )
  }

}

ส่วนประกอบที่รวมอยู่ (ซึ่งขณะนี้เป็นฟังก์ชันไร้สัญชาติ):

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>
)

องค์ประกอบหลักรักษาค่าที่เลือกสำหรับผลไม้ (ในสถานะ) ส่วนประกอบที่รวมจะแสดงองค์ประกอบที่เลือกและการอัปเดตจะถูกส่งกลับไปยังองค์ประกอบหลักเพื่ออัปเดตสถานะของมัน (ซึ่งจะวนกลับไปที่องค์ประกอบที่รวมไว้เพื่อเปลี่ยนค่าที่เลือก)

หมายเหตุการใช้ชื่อ prop ซึ่งช่วยให้คุณประกาศวิธีการ handleChange เดียวสำหรับเขตข้อมูลอื่น ๆ ในรูปแบบเดียวกันโดยไม่คำนึงถึงชนิดของพวกเขา

นี่คือตัวอย่างล่าสุดของวิธีการทำ จากเอกสารตอบกลับรวมถึงไวยากรณ์เมธอด "fat-arrow" ที่มีผลผูกพันอัตโนมัติ

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>
    );
  }
} 

เพียงเพิ่มตัวเลือกแรกของแท็กที่คุณเลือก:

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

สิ่งนี้จะกลายเป็นค่าเริ่มต้นและเมื่อคุณเลือกตัวเลือกที่ถูกต้องจะถูกกำหนดในสถานะของคุณ

***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>);
        }
    });

ฉันมีปัญหากับ<select>แท็กที่ไม่อัปเดตให้ถูกต้อง<option>เมื่อสถานะมีการเปลี่ยนแปลง ปัญหาของฉันดูเหมือนว่าถ้าคุณแสดงสองครั้งติดต่อกันอย่างรวดเร็วเป็นครั้งแรกที่ไม่มีการเลือกล่วงหน้า<option>แต่เป็นครั้งที่สองที่มี<select>แท็กหนึ่งแท็กจะไม่อัปเดตสำหรับการเรนเดอร์ครั้งที่สอง

ผมพบว่าวิธีแก้ปัญหานี้โดยใช้refs คุณต้องได้รับการอ้างอิงถึง<select>โหนดแท็กของคุณ(ซึ่งอาจซ้อนอยู่ในส่วนประกอบบางส่วน) จากนั้นอัปเดตvalueคุณสมบัติด้วยตนเองในcomponentDidUpdatehook

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

โพสต์คำตอบที่คล้ายกันสำหรับ 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>
  )
}

ฉันมีทางออกที่ง่ายคือการติดตาม HTML พื้นฐาน

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

.text-hide เป็นคลาสของ bootstrap หากคุณไม่ได้ใช้ bootstrap นี่คือ:

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

ฉันได้รับปัญหาที่คล้ายกันโดยการตั้งค่า defaultProps:

ComponentName.defaultProps = {
  propName: ''
}

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

ดังนั้นตอนนี้ฉันหลีกเลี่ยงข้อผิดพลาดในการรวบรวมถ้าเสาของฉันไม่มีอยู่จนกระทั่งติดตั้ง