javascript - 如何处理选择中显示的文本？

Question

我只需要显示所选选项的一部分:

const refertiItems = this.state.referti.map((referti, i) => {
  return (
    <option key={referti.hash_referto} >
  [ {referti.proprietario} - {referti.tipo_esame} - {referti.data_esame.split('T')[0]} ] {referti.hash_referto}
    </option>
  )
});

然后

        Label for="type" text="Seleziona un referto (proprietario - tipo esame - data)" />
        <select
          name="careGiver"
          placeholder="Selezionare Referto"
          onKeyPress={this.onEnter}
          value={this.codiceReferto}
          onChange={this.handleInputChange}
        >
          <option default value="vuoto" />
          {refertiItems}
        </select>

当我选择一个选项时，我只想显示 {referti.proprietario} 和 {referti.tipo_esame}，而不是 {referti.hash_referto}。 我不能把它从选项中去掉。

有什么建议吗？

Answer 1

您绝对可以更新文本。您可以通过在选择一个项目以显示适当的显示文本时更新您的状态数组来做到这一点。这只是一个粗略的示例，但显示了如何完成的概念:

const {
  useState,
  useEffect,
  useRef
} = React;

function App() {
  const [opts, setOpts] = useState([{
      label: 'one',
      active: 'one',
      inactive: 'one remove_me'
    },
    {
      label: 'two remove_me',
      active: 'two',
      inactive: 'two remove_me'
    },
    {
      label: 'three remove_me',
      active: 'three',
      inactive: 'three remove_me'
    },
  ]);

  return (<div>
      <select onChange={({target: {value}})=>{
          // There are better ways to deep copy, should look into replacing this
          let deepCopy = JSON.parse(JSON.stringify(opts)).map(e=>{
            e.label = e.active==value?e.active:e.inactive;
            return e;
          });
          setOpts(deepCopy);
        }}>
        {opts.map(o=>
            <option key={o.active} value={o.active}>{o.label}</option>)}
      </select>
    </div>); 
}

const el = document.querySelector("#app");
ReactDOM.render( < App / > , el);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>