在选中<select>选项上选择“selected”

在<select>菜单的React组件中，我需要在反映应用程序状态的选项上设置所选属性。

在render()中，optionState从状态所有者传递给SortMenu组件。选项值作为道具从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>

有没有解决这个问题的推荐方法?

当前回答

if you store objects in a state.

class Studentinformation extends Component
{
    constructor(props)
 {
   super(props);
   this.handlechange=this.handlechange.bind(this);
   this.handleSubmit=this.handleSubmit.bind(this);
   
   this.state={Studentinfo:{
          Name:'',
          Skill:'Java',
          Address:''
        }};
 }
 handlechange(event)
 {
   const name=event.target.name;
   const value=event.target.value;

   this.setState({ Studentinfo:
  {
    ...this.state.Studentinfo,
    [name]:[value]
  }});
 }
 handleSubmit(event)
 {
  event.preventDefault();
 }
 render(){
   return (
  <div>
    <form onSubmit={this.handleSubmit}>
      <label>Name: <input type="text" name="Name" value={this.state.Studentinfo.Name} onChange={this.handlechange}></input></label>
      <br/>
      <label>Skills: 
        <select value={this.state.Studentinfo.Skill} name="Skill" onChange={this.handlechange}>
          <option value="C++" >C++</option>
          <option value="C#">C#</option>
          <option  value="Java">Java</option>
        </select>
        </label>
        <br/>
        <textarea value={this.state.Studentinfo.Address} onChange={this.handlechange}/>
        <br/>
      <input type="submit" value="Submit"></input>
    </form>
  </div>
   );
 }

}

2021-10-15 17:26:35

其他回答

if you store objects in a state.

class Studentinformation extends Component
{
    constructor(props)
 {
   super(props);
   this.handlechange=this.handlechange.bind(this);
   this.handleSubmit=this.handleSubmit.bind(this);
   
   this.state={Studentinfo:{
          Name:'',
          Skill:'Java',
          Address:''
        }};
 }
 handlechange(event)
 {
   const name=event.target.name;
   const value=event.target.value;

   this.setState({ Studentinfo:
  {
    ...this.state.Studentinfo,
    [name]:[value]
  }});
 }
 handleSubmit(event)
 {
  event.preventDefault();
 }
 render(){
   return (
  <div>
    <form onSubmit={this.handleSubmit}>
      <label>Name: <input type="text" name="Name" value={this.state.Studentinfo.Name} onChange={this.handlechange}></input></label>
      <br/>
      <label>Skills: 
        <select value={this.state.Studentinfo.Skill} name="Skill" onChange={this.handlechange}>
          <option value="C++" >C++</option>
          <option value="C#">C#</option>
          <option  value="Java">Java</option>
        </select>
        </label>
        <br/>
        <textarea value={this.state.Studentinfo.Address} onChange={this.handlechange}/>
        <br/>
      <input type="submit" value="Submit"></input>
    </form>
  </div>
   );
 }

}

2021-10-15 17:26:35

主点控制组件

您希望设置一个“受控组件”。这将要求您在元素上设置值，并处理on change事件以更新值。

https://reactjs.org/docs/forms.html#controlled-components

例子

https://codepen.io/codyswartz/pen/QWqYNrY

简单功能组件选择示例

这还包括一个默认值和灰色。

const defaultSelectValue = "Select a fruit"

const SelectExample = () => {
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      <label htmlFor="fruits">Fruits</label>{' '}
      <select
        id="fruits"
        name="fruits"
        defaultValue={selected}
        style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
        onChange={e => setSelected(e.target.value)}
      >
        <option>{defaultSelectValue}</option>
        <option>Banana</option>
        <option>Apple</option>
        <option>Orange</option>
      </select>

      <h2>Selected: {selected}</h2>
    </>
  )
}

// Usage
<SelectExample />

带有默认值的动态可重用示例

这将接受一个字符串集合，并将第一个字符串作为默认值。

const SelectExample = ({ name, items }) => {
  const defaultSelectValue = items[0]
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      <label htmlFor={name}>{name}</label>{' '}
      <select
        id={name}
        name={name}
        defaultValue={selected}
        style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
        onChange={e => setSelected(e.target.value)}
      >
        {items.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>

      <h2>Selected: {selected}</h2>
    </>
  )
}

// Usage
<SelectExample
  name="fruits"
  items={['Select a fruit', 'Banana', 'Apple', 'Orange']}
/>

2022-01-15 00:58:40

React让你更容易做到这一点。而不是在每个选项上定义selected，你可以(也应该)简单地在select标签上写value={optionsState}:

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

有关更多信息，请参阅React选择标签文档。

此外，React会自动理解布尔值，所以你可以简单地写(注意:不推荐)

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

它会适当地输出" selected "

2014-02-12 18:09:34

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

2016-08-31 13:02:05

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

2017-02-10 16:47:07

在选中<select>选项上选择“selected”

推荐文章

最新文章

标签