Question

我有一个MultiSelect和一个React Table .. Select将值存储到值Array ..

现在的方式我可以选择一个选项，表格可以正确显示数据。但是，我正在寻找每个选定选项的表格。我怎么能实现这样的目标？

 handleSelectChange (value) {
   console.log('You\'ve selected:', value);
   this.setState({ value: value }, () => this.fetchTable());
 }
      
      
 fetchTable() {
   const url = 'http://localhost:8000/issues/from/';
   const value = this.state.value;
   const string = url+value;
   fetch(string)
   .then(function(response) {
     return response.json();
   })
   .then((myJson) => this.setState({data: myJson.issues}));
 }
 
 componentDidMount() {
   this.fetchData();
 }
 
 
 render() {
 
 const filteredResult = this.state.boards.map(item => (
       {
          value: item.key,
          label: item.name, 
    }
  ));
      
 const filteredResult1 = this.state.data.map(item => (
        {
          name: item.fields,
          id: item.id, 
          key: item.key,
   }
 ));
 
     return (
      <div>
        <Select
		closeOnSelect={!stayOpen}
		disabled={disabled}
		multi
		onChange={this.handleSelectChange}
		options={filteredResult}
		placeholder="Select Assignee(s)..."
        removeSelected={this.state.removeSelected}
	    rtl={this.state.rtl}
		simpleValue
		value={value}
      />
      <ResponseTable data={filteredResult1} />
      </div>  

      
    );
  }
}

Answer 1

您的ResponseTable组件如何？我想你可以使用map函数来循环并显示表格行。是这样的：

const data = [{name: 'Test 1', id: 1, key: 'key_1'}, {name: 'Test 2', id: 2, key: 'key_2'}, {name: 'Test 3', id: 3, key: 'key_3'}];

_renderTableBody = () => {
   return data.map((item) => (
       return (
           <TableRow>
             <TableCell>item.name</TableCell>
             <TableCell>item.id</TableCell>
             <TableCell>item.key</TableCell>
           </TableRow>
       )
   ))
}

然后在渲染功能中，你可以直接替换

<ResponseTable data={filteredResult1} />

进入这样的代码：

{this._renderTableHead()}  // same method as _renderTableBody() to generate the table head title
{this._renderTableBody()}

希望这有帮助！

Answer 2

将一些虚拟键保持在最初为空数组的状态。它会将选择的选项值推入其中。如下所示

constructor(props){
  this.state = {
    selectedValues: []
  }
}

改变你的handleSelectChange，如下所示。它需要更新此数组中当前选定的值

 handleSelectChange (value) {
   console.log('You\'ve selected:', value);
   //this.setState({ value: value }, () => this.fetchTable());

   let currentSelectedValue = this.state.selectedValues.filter(selected => selected == value)  
   //it will return a value if it is found otherwise empty array will be returned

   if(currentSelectedValue.length == 0){
     let updatedSelectedValue = this.state.selectedValues.push(value)
     this.setState({ selectedValues: updatedSelectedValues }, () => this.fetchTable());
   }
 }

removeSelected (value) {
  console.log('You\'ve selected:', value);
  //this.setState({ value: value }, () => this.fetchTable());

  let currentSelectedValue = this.state.selectedValues.filter(selected => selected !== value)  //this will delete the removed option from array           

  this.setState({ selectedValues: currentSelectedValue }, () => this.fetchTable());
 }


fetchTable() {
   if( this.state.selectedValues.length > 0 ){
     this.state.selectedValues.map((value)=>{
       const url = 'http://localhost:8000/issues/from/';
       const string = url+value;
       fetch(string)
       .then(function(response) {
         return response.json();
       })
       .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]})); //use spread operator to combine the result of each selectedValue
     });     
   }
 }

render() {

 const filteredResult = this.state.boards.map(item => (
   {
     value: item.key,
     label: item.name, 
   }
 ));

 const filteredResult1 = this.state.data.map(item => (
   {
     name: item.fields,
     id: item.id, 
     key: item.key,
   }
 ));

     return (
      <div>
        <Select
        closeOnSelect={!stayOpen}
        disabled={disabled}
        multi
        onChange={this.handleSelectChange}
        options={filteredResult}
        placeholder="Select Assignee(s)..."
        removeSelected={this.state.removeSelected}
        rtl={this.state.rtl}
        simpleValue
        value={value}
      />

      this.state.data.map((item) => {   // item here will hold the json object of { id: item.id, key: item.key, name: item.fields } 
        <ResponseTable data={item} />
      })

      </div>
    );
  }
}

针对Array上的每个值的ReactJS Render Table

2 个答案: