есть способ прочитать значение из каждого раскрывающегося списка, которое НЕ показано (прочитано из e.target.value) вместо этого, т.е. если у каждого из них был идентификатор или что-то еще, как мне передать его, чтобы e.target.value мог получить доступ к этому идентификатору.
blockquote>
e.target
является ссылкой наHTMLSelectElement
, где произошлоchange
. Вы можете найтиoption
с совпадающимvalue
в спискеoptions
, а затем использовать свойства этогоHTMLOptionElement
, например:handleStatusChange({target}) { const value = target.value; const optionElement = Array.from(target.options).find(opt => opt.value === value); // If found, use information from `optionElement` to find the // entry in `statusData` in a state change, e.g.: if (optionElement) { const id = optionElement && optionElement.id; if (id) { this.setState(state => { const entry = state.statusData.find(e => e.id === id); if (entry) { // Use `entry`'s information } } } } }
Реагировать, используя [1110 ] свойства на записи в
statusData
:
class Example extends React.Component { constructor(...args) { super(...args); this.handleStatusChange = this.handleStatusChange.bind(this); this.state = { detail: "", statusData: [ {id: "one", title: "One", detail: "Details for one"}, {id: "two", title: "Two", detail: "Details for two"}, {id: "three", title: "Three", detail: "Details for three"} ] }; } handleStatusChange({target}) { const value = target.value; const optionElement = Array.from(target.options).find(opt => opt.value === value); const id = optionElement && optionElement.id; if (id) { this.setState(state => { const entry = state.statusData.find(e => e.id === id); if (entry) { return { detail: entry.detail } } }); } } render() { const {statusData, detail} = this.state; return ( <div> <select id="inputIdentity" className="form-control content-input" onChange={this.handleStatusChange} > <option value="" hidden> Please Choose </option> {statusData ? ( statusData.map((status) => ( <option id={status.id}>{status.title}</option> )) ) : ( <option>Loading...</option> )} </select> <div>Detail: {detail}</div> </div> ); } } ReactDOM.render( <Example />, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
cref предназначен, чтобы относиться к другому участнику - класс, метод и т.д.
С чем Вы ожидали бы, что это свяжется в этом случае? В целом, чем Вы хотите полный эффект быть?
Согласно этому превосходному руководству документа XML, <see>
тег имеет недокументированный атрибут langword
:
<see langword="switch" />
Это помогло бы Вам? Могло бы стоить попробовать его только для наблюдения то, что это делает.
Если Вы просто хотите использовать нормальную гиперссылку, используйте href вместо cref:
<see href="http://msdn.microsoft.com/en-us/library/06tc147t.aspx">switch</see>