代码之家  ›  专栏  ›  技术社区  ›  me-me

反应中的受控选择未设置默认值

  •  0
  • me-me  · 技术社区  · 6 年前

    我有一个React组件,呈现3个select元素。我想为所有3设置一个默认值,但当我尝试这样做时,它不起作用。

    我使用一个传入的称为type的prop来区分每一个。 Type是每个select元素的名称。我的defaultV正在注销所有3个select元素所需的正确值。但是当它们呈现时,defaultValue不会被设置。开始的defaultValue为空,但当我在应用程序中进入编辑模式时,defaultV会为所有3个添加,但由于某些原因,defaultValue不会为每个渲染设置它。我想知道它是不是被前一个渲染覆盖了,因为它渲染了3次?我怎么能阻止这一切。

    代码

      const defaultV = data.value[type];
    
      <select
        onChange={onHandleChange}
        id={`${pre}${type}`}
        name={`${pre}${type}`}
        defaultValue={{ label: type, value: defaultV }}
      >
        <option value="" hidden invalid="true">{type}</option>
        {
          dates[type]().map(date => <option key={date}>{date}</option>)
        }
      </select> 
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Shubham Yerawar    6 年前

    您可以直接将默认值传递给 select 标签。

    请参考以下代码:

    class FlavorForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value: 'lime'};
      }
    
      render() {
        return (
          <form>
            <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>
        );
      }
    }
    

    你的情况是,

    const defaultV = data.value[type];
    
      <select
        onChange={onHandleChange}
        id={`${pre}${type}`}
        name={`${pre}${type}`}
        value={defaultV}
      >
        <option value="" hidden invalid="true">{type}</option>
        {
          dates[type]().map(date => <option key={date} value={date}>{date}</option>)
        }
      </select>