Question

我会在选择下拉列表中显示多个项目。

这是代码。但是我得到的选择很多，对于我想在下拉菜单中显示的每个项目，都有一个选择。

      mostraReferti(id) {
         axios.get('http://localhost:8080/api/REFERTOs/' + id)
           .then(response => {
            this.setState({ referti: response.data }, () => {
             console.log("response.data")
                console.log("THIS.STATE", this.state);
              })        
          })
          .catch(err => console.log(err))
        }

   render() {
     const refertiItems = this.state.referti.map((referti, i) => {
      return (
        <RefertiItems key={referti.hash_referto} item={referti} />
      )
     })
 <Form>
 <Label for="type" text="Referto" />
            <div className="custom-select">
            {refertiItems}
            </div>
 </Form>

而RefertiItems是：

 render(){
     console.log("SONO DENTRO")
 return (
     <div className={styles}>
     <div  className= "custom-select">
     <Label for="type" text="Codice Referto" />
     <select
       name="codiceReferto"
       placeholder="Selezionare Referto"
      onKeyPress={this.onEnter}     //allows you to move to the next panel with the enter key
       value={this.codiceReferto}
       onChange={this.handleInputChange}>
         <option default value="vuoto"></option>
             <option>{this.state.item.tipo_esame}- 
{this.state.item.data_esame}</option>
    </select>
    </div>
    </div>

我在做什么错了？

Answer 1

首先，您在格式化方面遇到问题。很难从缩进错误的代码中理解某些内容。

要解决主要问题，您无需重复select组件，只需重复option并将其传递到select组件内部，例如：

render() {
     return (
          <Form>
               <Label for="type" text="Referto" />
               <div className="custom-select">
                    <RefertiItems items={refertiItems} />
               </div>
          </Form>
     );
}

RefertiItems：

render() {
    const refertiItems = this.props.items.map((referti, i) => {
        return (
            <option key={referti.hash_referto}>
               {referti.tipo_esame}-{referti.data_esame}
            </option>
        )
    });
    return (
        <div className={styles}>
            <div  className= "custom-select">
                <Label for="type" text="Codice Referto" />
                <select
                    name="codiceReferto"
                    placeholder="Selezionare Referto"
                    onKeyPress={this.onEnter}
                    value={this.codiceReferto}
                    onChange={this.handleInputChange}
                >
                    <option default value="vuoto"></option>
                    {refertiItems}
                </select>
            </div>
        </div>
    )
}

如何正确处理选择下拉菜单

1 个答案: