1
私は2つのフォーム要素を持つテーブルを持っていますが、要素の1つからデータを取得しようとしていますが、入力フィールドに正しくアクセスしてください。反応キーを使用してリスト内のフォームデータにアクセスする
私の考えは、キーの小道具を使用してすべての要素にアクセスできるはずですが、私はこれをまだ使用していません。
私は何を持っていることは、チェックボックスと選択リストを含む表のための表の行を作成する次のとおりである：私はキーとcheckbox値を得ることができます私のonChangeEvent上
var rows = []
rows = filteredItems.map(
(item, index) =>
<tr key={index}>
<td>{item.id}</td>
<td>{item.name}</td>
<td><Select2 data={['', 'feature', 'documents', 'discussion']}/</td>
<td><input type="checkbox" value={item.id} onChange={() => this.updateService(index, item.id)}/></td>
</tr>
);
、しかし私は選択の価値をどのように得るかについての損失で。
要求ごとに、私は含めていたように私は反応するコンポーネント：
import React, { Component } from "react";
import * as Bootstrap from "react-bootstrap";
import Select2 from 'react-select2-wrapper';
import 'react-select2-wrapper/css/select2.css';
import $ from "jquery";
import _ from "lodash";
import Layout from "../ui/layout";
import TitleBar from "../ui/title-bar";
export default class Services extends Component {
state = {
pageSize: 25,
page: 1,
items: [],
orderBy: "",
sortBy: "",
query: ""
}
componentDidMount(){
$.get("http://localhost:5000/_api/admin/services", result => this.setState({items: result}));
}
isActiveButton(page){
var activePage = this.state.page;
return `paginate_button ${page === activePage ? "active" : ""}`;
}
isLastPage(){
var numberOfButtons = Math.ceil(this.state.items.length/this.state.pageSize);
return `paginate_button next ${this.state.page === numberOfButtons ? "disabled" : "" }`;
}
isFirstPage(){
return `paginate_button next ${this.state.page === 1 ? "disabled" : "" }`;
}
orderById =() => {
var sortBy = this.state.sortBy === "asc" ? "desc" : "asc";
this.setState({orderBy: "id", sortBy: sortBy});
}
orderByName =() => {
var sortBy = this.state.sortBy === "asc" ? "desc" : "asc";
this.setState({orderBy: "name", sortBy: sortBy});
}
search=() => {
this.setState({query: this.refs.search.value});
}
updatePage = (page, direction) => {
if(direction){
var numberOfButtons = Math.ceil(this.state.items.length/this.state.pageSize);
if(direction === "next" && page <= numberOfButtons)
{
this.setState({page: page});
}
if(direction === "prev" && page > 0)
{
this.setState({page: page});
}
} else {
this.setState({page: page});
}
}
updateService = (e) => {
var serviceId = e.target.value
$.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
url: "http://localhost:5000/_api/admin/monitor/service",
data: JSON.stringify({ Id: serviceId }),
dataType: "json"
});
}
render(){
var rows = [];
var filteredItems = [];
var items = this.state.items;
var orderBy = this.state.orderBy;
var sortBy = this.state.sortBy;
var pageSize = this.state.pageSize;
var currentPage = this.state.page - 1;
var query = this.state.query;
filteredItems = items.filter(item => item.name.toLowerCase().includes(query));
filteredItems = _.orderBy(filteredItems, function(item){
return typeof item[orderBy] === "string" ? item[orderBy] : item[orderBy];
}, sortBy);
var numberOfButtons = Math.ceil(filteredItems.length/pageSize);
var numberOfelements = filteredItems.length;
var start = currentPage * pageSize;
var end = start + pageSize;
filteredItems = filteredItems.slice(start, end);
rows = filteredItems.map((item, index) =>
<tr key={index}>
<td>{item.id}</td>
<td>{item.name}</td>
<td><Select2 data={['', 'feature', 'documents', 'discussion']}/>
</td>
<td><input type="checkbox" value={item.id} checked={item.isMonitored} onChange={this.updateService}/></td>
</tr>
);
//-- setup the pager
var buttons = _.range(1, numberOfButtons + 1).map(idx =>
<li key={idx} className={this.isActiveButton(idx)}>
<a href="#" onClick={() => this.updatePage(idx, null)}>{idx}</a>
</li>
)
return(
<span>
<Layout>
<TitleBar
title="Jolera Alerts Board Settings"
details="Select the services to monitor"
root="Settings"
page="Services"
url="/settings"/>
<Bootstrap.Row>
<Bootstrap.Col md={2}>
<div className="hpanel hjolera">
<div className="panel-body">
<div className="m-b-md">
<h4>Settings</h4>
</div>
<Bootstrap.Button id="refresh" bsStyle="info" block className="btn-jolera">Update Services</Bootstrap.Button>
</div>
</div>
</Bootstrap.Col>
<Bootstrap.Col md={10}>
<div className="hpanel hjolera">
< div className="panel-body">
<div className="table-responsive">
<Bootstrap.Row>
<Bootstrap.Col md={6}></Bootstrap.Col>
<Bootstrap.Col md={6}>
<div className="form-group">
<div>
<label style={{top: 8}} className="col-md-2 control-label">Search</label>
<div className="col-sm-10"><input id="search" ref="search" type="text" className="form-control" onChange={() => this.search()}/></div>
</div>
</div>
</Bootstrap.Col>
</Bootstrap.Row>
<table
className="table table-condensed table-striped">
<thead>
<tr>
<th onClick={this.orderById}>Id</th>
<th onClick={this.orderByName}>Name</th>
<th>Severity</th>
<th>Monitor</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>
</div>
<div className="panel-footer">
<Bootstrap.Row>
<Bootstrap.Col md={4}>
Showing {start} to {end} of {numberOfelements} entries
</Bootstrap.Col>
<Bootstrap.Col md={8} >
<ul className="pagination pull-right" style={{margin: 0}}>
<li className={this.isFirstPage()}>
<a href="#" onClick={() => this.updatePage(this.state.page - 1, "prev")}>Previous</a>
</li>
{buttons}
<li className={this.isLastPage()}>
<a href="#" onClick={() => this.updatePage(this.state.page + 1, "next")}>Next</a>
</li>
</ul>
</Bootstrap.Col>
</Bootstrap.Row>
</div>
</div>
</Bootstrap.Col>
</Bootstrap.Row>
</Layout>
</span>
);
}
}
私がいる問題は、私はcheckboxをクリックした場合、私は行全体をキャプチャし、両方の値を取得したいということですチェックボックスと選択リストがありますが、現在私はそれを得ることができません。今すぐ自分のコードを持っているので、チェックボックスにはonClickイベントだけを聞き取り、チェックボックスの値を得ることができますが、選択リストの値があればそれを取得したいと思っています。
コードのサンプルがありますか？それはまだ私のために不明 –