Question

我只想将所有行数据传递给模态类并调用每一个数据，但我仍然在学习反应。目前我的模态类仍然是静态数据。我真的想学习反应，请帮助如何将所有行数据传递给模态类。这是我目前的代码。

模态类数据仍然是静态的。

class Modal extends React.Component {
constructor (props) {
super(props)

this.state = {
  modalOpened: false
}

this.modalToggle = this.modalToggle.bind(this)
}

modalToggle () {
this.setState({ modalOpened: !this.state.modalOpened })
}
render () {
const coverClass = this.state.modalOpened ? 'modal-cover modal-cover-active' 
: 'modal-cover'
const containerClass = this.state.modalOpened ? 'modal-container modal-container-active' : 'modal-container'
return (
  <div>
    <button className='btn btn-primary' onClick={this.modalToggle}>View</button>
    <div className={containerClass}>
      <div className='modal-header'>
        <button type="button" className="close" data-dismiss="modal" onClick={this.modalToggle}><span aria-hidden="true">&times;</span><span className="sr-only" >Close</span></button>
        <h4 className="modal-title" id="myModalLabel">Number: 11231564243</h4>
      </div>
      <div className='modal-body'>
        <table>
          <tbody>
            <tr>
              <td>Status:</td>
              <td>NEW</td>
            </tr>
          </tbody>
        </table> 
      </div>
      <div className='modal-footer'>
        <button type="button" className="btn-primary" data-dismiss="modal" onClick={this.modalToggle}>Close</button>
      </div>
    </div>

    <div className={coverClass} onClick={this.modalToggle}></div>
  </div>
)
}
}

const Row = ({Date, Id, Name, Title, Status, 
index}) => (
<tr key={index}>
   <td>{Date}</td>
   <td>{Id}</td>
   <td>{Name}</td>
   <td>{Title}</td>
   <td>{Status}</td>
   <td><Modal value={Id}/></td>
</tr>
);

表类------------------------------

class Table extends React.Component {
constructor(props) {
super(props);

this.state = {
  data: [
    {
      Date: '',
      Id: '',
      Name: '',
      Title: '',
      Status: ''
    },
  ],
};
this.compareBy.bind(this);
this.sortBy.bind(this);
  }
componentWillReceiveProps(nextProps) {
  if( Object.keys(nextProps.orders).length) {
      this.setState({data: nextProps.orders});
  }
}

  compareBy(key) {
return function (a, b) {
  if (a[key] < b[key]) return -1;
  if (a[key] > b[key]) return 1;
  return 0;
};
  }

  sortBy(key) {
let arrayCopy = [...this.state.data];
arrayCopy.sort(this.compareBy(key));
this.setState({data: arrayCopy});
  }

  render() {
const rows = this.state.data.map( (rowData, index) => <Row {...rowData} index={index} />);
return (
  <table>
    <thead>
      <tr>
      <th onClick={() => this.sortBy('Date')} >Date</th>
      <th onClick={() => this.sortBy('Id')}>ID</th>
      <th onClick={() => this.sortBy('Name')}>Name</th>
      <th onClick={() => this.sortBy('Title')}>Title</th>
      <th onClick={() => this.sortBy('Status')}>Status</th>
      <th>Action</th>
      </tr>
    </thead>
    <tbody>
        {rows}
    </tbody>
  </table>
);

  }
}

父类--------------------------

export class OrdersView extends React.Component {
//API Data-----------------------------------
constructor(props) {
super(props)
this.state = {
  saved: false,
  orders: {},
  value: ''
};
}
//onchange start date
handleOnChangeFrom(e) {
this.setState({
  from: e.target.value,
});
}
//onchange end date
handleOnChangeTo(e) {
this.setState({
  to: e.target.value,
});
}  
filterClick = () => {
// @notice, call the api endpoint only when the component has been mounted.
//EXAMPLE Orders retrieval
//this.state.from and this.state.to value are passed on handleonchange
//npm install dateformat
var dateFormat = require('dateformat');
var dStart = this.state.from;
var dEnd= this.state.to;

var dateStart = dateFormat(dStart, "dd/mm/yyyy");
var dateEnd = dateFormat(dEnd, "dd/mm/yyyy");

const params = {
    startDate: dateStart,
    endDate: dateEnd,
}
LambdaService.getOrdersAsync(params)
.then((orders) => {
    this.setState({
        orders: orders
    });
})
.catch(err => {
    alert('no orders available on the selected range of date');
});
}

render () {
const {username} = this.props;
const bgStyle = {background: "url(img/sample.jpg)"};
const {
  orders: orders
  } = this.state
return (
  <div className='col-xs-12 col-no-padding col-stretch-children dashboard'>
      <Title render='My Orders' />
      <div className='StatusColumn details col-lg-3 col-md-3 col-sm-12 col-xs-12' style={bgStyle}>
        <div className="StatusColumnInner">
        <h3 className='dashboard--header'>{username} Order's</h3>
        </div>
      </div>
      <div className='details col-main-content col-lg-9 col-md-9 col-sm-12 col-xs-12'>
        <div className='MainColumn'>
          <span className='order-span-style'>From </span>
          <input type="date" id="from" value={this.state.from} onChange={ (e) => this.handleOnChangeFrom(e) } />
          <span className='order-span-style'>To </span>
          <input type="date" id="to" value={this.state.to} onChange={ (e) => this.handleOnChangeTo(e) } />
          <button className="button-order-style" onClick={this.filterClick.bind(this)}>Run Report</button>
          <Table orders={orders}></Table>
        </div>
      </div>
  </div>
)
}
}
OrdersView.propTypes = {
username: PropTypes.string,
}
export default OrdersView

Answer 1

经过数小时的研究后，我找到了答案。

我将所有值添加到模态按钮

const Row = ({Date, Id, Name, Title, Status, 
Quantity, Price, index}) => (
<tr key={index}>
   <td>{Date}</td>
   <td>{Id}</td>
   <td>{Name}</td>
   <td>{Title}</td>
   <td>{Status}</td>
   <td>
      <Modal 
        OrderDate = {Date} 
        OrderId = {Id}
        AddictName = {Name}
        ProductTitle = {Title}
        OrderStatus = {Status}
        Quantity = {Quantity}
        UnitPrice = {Price}
        index = {index}
      />
    </td>
</tr>
);

并使用此示例{this.props.Status}

将数据调用为模态

class Modal extends React.Component {
constructor (props) {
super(props)

this.state = {
modalOpened: false
}

this.modalToggle = this.modalToggle.bind(this)
}

modalToggle () {
this.setState({ modalOpened: !this.state.modalOpened })
}
render () {
const coverClass = this.state.modalOpened ? 'modal-cover modal-cover-active' 

: 'modal-cover'
const containerClass = this.state.modalOpened ? 'modal-container modal-
container-active' : 'modal-container'
return (
<div>
<button className='btn btn-primary' onClick={this.modalToggle}>View</button>
<div className={containerClass}>
  <div className='modal-header'>
    <button type="button" className="close" data-dismiss="modal" onClick=
{this.modalToggle}><span aria-hidden="true">&times;</span><span 
className="sr-only" >Close</span></button>
    <h4 className="modal-title" id="myModalLabel">Number: 11231564243</h4>
  </div>
  <div className='modal-body'>
    <table>
      <tbody>
        <tr>
          <td>Status:</td>
          <td>{this.props.Status}</td>
        </tr>
      </tbody>
    </table> 
  </div>
  <div className='modal-footer'>
    <button type="button" className="btn-primary" data-dismiss="modal" onClick={this.modalToggle}>Close</button>
  </div>
</div>

<div className={coverClass} onClick={this.modalToggle}></div>
</div>
)
}
}

REACTJS - 需要帮助将表行数据传递给模态类

1 个答案: