使选择选项可点击，但不要让它填充选择输入视图 reactstrap 输入答案

【问题标题】：make select option clickable, but keep it from populating the select input view reactstrap Input使选择选项可点击，但不要让它填充选择输入视图 reactstrap 输入
【发布时间】：2022-01-10 07:16:45
【问题描述】：

我有一个名为“+ Create new”的选项

当用户单击此选项时，我会显示一个模式来创建一个新选项，但是我不希望此选择选项在单击该选项后呈现 + 创建新选项。

如何保持选项“可点击”，但不让它填充选择的实际输入视图？

这是组件

import React, {useState} from 'react';
import { Input } from 'reactstrap'

const TestComponent = () => {

const [upload, setUpload] = useState({
selectHeader: []
})

 const [showFieldModal, setShowFieldModal] = useState(false);

return (
              <Fragment>
                <Input
                  type="select"
                  name="selectHeader"
                  id="selectHeader"
                  onChange={({ target }) => {
                    if(target.value === "+ Create new") {
                      setShowFieldModal(!showFieldModal)
                    } else {
                      setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index: index}]})
                    }
                  }}
                 >
                   <option>First name</option>
                   <option>Last name</option>
                 
                    <option>+ Create new</option> // make this clickable but dont allow it to show as the selects option when clicked....
                 </Input>
                </Fragment>
);
};

           export default TestComponent;

下面的代码考虑了已接受的答案，但如果您需要映射数组并使用 type="select" 呈现多个输入（不允许选择实际呈现“+ create new”选项），则添加了该功能

注意：id更新为. id={`selectHeader${index}`} ，onChange更新为document.getElementById(`selectHeader${index}`).value= " " ;

<Table responsive bordered striped hover>
      <thead>
        <tr>
          {
            fileContacts.map((contact, index) => (
                <th className="bg-primary pr-1 pl-1 pt-2 pb-2 overflow-hidden" scope="col" key={index}>
                  <Input
                  type="select"
                  className="fs--1"
                  name="selectHeader"
                  id={`selectHeader${index}`}
                  onChange={({ target }) => {
                    
                    if(target.value === "+ Create new") {
                      document.getElementById(`selectHeader${index}`).value= " " ;
                      setShowFieldModal(!showFieldModal)
                    } else {
                      setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index: index}]})
                    }
                  }}
                 >
                   
                   <option>First name</option>
                   <option>Last name</option>
                  
                 { fields.map((field, index) => (
                   <option key={index} >{field.title}</option> 
                 ))}
                    <option>+ Create new</option>
                 </Input>
                </th>  
          ))}
        </tr>
      </thead>
      <tbody>
        {
        upload.contacts.slice(0, 10).map((customer, index) => (
          <TableRow data={customer} key={index}/>
        ))
        }
      </tbody>
    </Table>```

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

试试看，你需要在点击选项后清空选择值，这可能对你有帮助

onChange={({ target }) => {
     if(target.value === "+ Create new") {
        document.getElementById('selectHeader').value= " " ;
        setShowFieldModal(!showFieldModal)
     } else {
        setUpload({...upload, selectHeader: [...upload.selectHeader, {value: 
        target.value, index: index}]})
     }
}}

【讨论】：