我有一個函數(shù)可以返回以下選項：const codesList = () => { return businessCodes.map((code, index) => { return <option key={code.BusinessCode}>{code.IndustryName}</option>; });};然后我有接受值的數(shù)據(jù)列表和輸入字段： <input type="text" className="filter-select-form-control" placeholder="Enter Business Code" id="business-code" list="code-dataList" autoComplete="off" ></input> </div> {/* DATALISTS CODES*/} <datalist id="code-dataList"> {RightFilterFunction.codesList()} </datalist>之后，在獲取輸入字段值的函數(shù)中，出現(xiàn)以下情況：const businessCode = document.getElementById("business-code").value;通過這部分代碼，businessCode 被準(zhǔn)確地分配為 code.IndustryName。我想知道如何訪問 options key={code.BusinessCode} 的這個關(guān)鍵屬性。我希望為businessCode分配code.BusinessCode，但datalist保留為code.IndustryName。JSON（businessCodes 數(shù)組）的一部分，您會知道為什么我更喜歡將 IndustryName 可視化并將 BusinessCode 發(fā)送到端點：{ BusinessCode: 111, IndustryName: "Crop Production" }, { BusinessCode: 112, IndustryName: "Animal Production and Aquaculture" }, { BusinessCode: 113, IndustryName: "Forestry and Logging" }
2 回答
慕勒3428872
TA貢獻1848條經(jīng)驗 獲得超6個贊
您可以用來state跟蹤代碼數(shù)組中選定的對象，因此您可以同時擁有BusinessCode和IndustryName
盡可能避免在 React 中使用 jQuery。檢查下面的代碼：
const businessCodes = [{
BusinessCode: 111,
IndustryName: "Crop Production"
},
{
BusinessCode: 112,
IndustryName: "Animal Production and Aquaculture"
},
{
BusinessCode: 113,
IndustryName: "Forestry and Logging"
}];
const codesList = () => {
return businessCodes.map((code, index) => {
return <option key={code.BusinessCode}>{code.IndustryName}</option>;
});
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {selectedOption: {}};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let selectedOption;
let filtered = businessCodes.filter(item => item["IndustryName"] === event.target.value)
if(filtered.length) selectedOption = filtered[0]
else selectedOption = {}
this.setState({selectedOption}, function(){
if(Object.keys(this.state.selectedOption).length)
console.log(this.state.selectedOption)
});
}
render() {
return (
<div>
<input
type="text"
placeholder="Enter Business Code"
list="code-dataList"
autoComplete="off"
value={this.state.value}
onChange={this.handleChange}
/>
{/* DATALISTS CODES*/}
<datalist id="code-dataList">
{codesList()}
</datalist>
</div>
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
慕尼黑5688855
TA貢獻1848條經(jīng)驗 獲得超2個贊
實際上，您錯誤地使用了它，并且從未嘗試像 React 中的 getElementById("business-code") 那樣訪問 DOM。這是一種不好的做法，并且總是通過 onChange 事件獲取價值。
使用值代替鍵，問題就解決了。
{this.state.businessCodes.map((code, index) => (
<option key={index} value={code.BusinessCode}>
{code.IndustryName}
</option>
))}
完整代碼它是如何在 React 上工作的。
import React, { Component } from "react";
class App extends Component {
state = {
businessCodes: [
{
BusinessCode: 111,
IndustryName: "Crop Production"
},
{
BusinessCode: 112,
IndustryName: "Animal Production and Aquaculture"
},
{
BusinessCode: 113,
IndustryName: "Forestry and Logging"
}
]
};
render() {
return (
<div>
<input
type="text"
name="code"
className="filter-select-form-control"
placeholder="Enter Business Code"
id="business-code"
list="code-dataList"
autoComplete="off"
/>
<datalist id="code-dataList">
{this.state.businessCodes.map((code, index) => (
<option key={index} value={code.BusinessCode}>
{code.IndustryName}
</option>
))}
</datalist>
</div>
);
}
}
export default App;
- 2 回答
- 0 關(guān)注
- 189 瀏覽
添加回答
舉報
0/150
提交
取消