javascript - ماهو - react ترجمة




React JSX: تحديد "محدد" على خيار<select> المحدد (7)

في مكون 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} ببساطة value={optionsState} على علامة التحديد نفسها :

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

مزيد من المعلومات على http://facebook.github.io/react/docs/forms.html#why-select-value .


حصلت حول مشكلة مشابهة عن طريق تعيين defaultProps:

ComponentName.defaultProps = {
  propName: ''
}

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

حتى الآن أتجنب الأخطاء في التجميع إذا لم يكن بلدي الدعامة موجودة حتى تصاعد.


لدي حل بسيط هو اتباع 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;
}

لقد واجهت مشكلة مع <select> علامات لا يتم تحديثها إلى <option> الصحيح عندما تتغير الحالة. يبدو أن مشكلتي هي أنك إذا قدمت مرتين بتتابع سريع ، في المرة الأولى التي لا يتم فيها تحديد <option> ولكن في المرة الثانية مع واحدة ، فإن علامة <select> لا يتم تحديثها في العرض الثاني ، ولكن تبقى على الافتراضي الأول.

لقد وجدت حلا لهذا باستخدام refs . تحتاج إلى الحصول على مرجع إلى العقدة <select> الخاصة بك (والتي قد تكون متداخلة في بعض المكونات) ، ثم قم بتحديث خاصية value يدويًا عليها ، في ربط componentDidUpdate .

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

هنا هو الحل الكامل الذي يتضمن أفضل إجابة والتعليقات الواردة أدناه (والتي قد تساعد شخص ما يكافح من أجل جمع كل ذلك معا):

في المكون الرئيسي:

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} onChange{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>
)

يحتفظ المكون الرئيسي بالقيمة المحددة للفاكهة (في الحالة) ، يعرض المكون المضمن عنصر التحديد ويتم تمرير التحديثات إلى المكون الرئيسي لتحديث حالته (والتي بدورها تعود إلى المكون المضمن لتغيير القيمة المحددة).

لاحظ استخدام اسم دعم يسمح لك بتعريف طريقة handleChange واحدة للحقول الأخرى في نفس النموذج بغض النظر عن نوعها.


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




react-jsx