小编aaa*_*umi的帖子

我正在使用React.JS和Material UI制作应用程序.

我将表组件用于我的应用程序.我可以改变列的宽度,但我不能改变表的宽度.

表格的宽度应与标题组件的宽度相同.(紫色).

我怎样才能做到这一点？

请在下面找到当前视图.我会很感激任何建议.非常感谢你的帮助.

index.js

import React from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
import Check from './img/check.png';
import Fail from './img/fail.png';
import Master from './img/Master.png';
import Visa from './img/Visa.png';
import Paypal from './img/Paypal.png';

class PaymentTable extends React.Component {
render() {
return(
  <Table>
  <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
  <TableRow>
    <TableHeaderColumn></TableHeaderColumn>
    <TableHeaderColumn>Today</TableHeaderColumn>
    <TableHeaderColumn>Payment Method</TableHeaderColumn>
    <TableHeaderColumn>Narrative</TableHeaderColumn>
    <TableHeaderColumn>Amount</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Master} alt="Master" 
    className="Master"/>MasterCard...4483</TableRowColumn>
    <TableRowColumn>Prestige …

我正在为我的 React 应用程序使用 popover。它工作正常，但我想添加通过单击其中一个菜单项来关闭弹出窗口的功能。

我可以通过单击弹出窗口外部来关闭弹出窗口。是否可以通过单击弹出窗口中的菜单项之一来关闭弹出窗口？

目前来看

代码

class Home extends React.Component{\n\nconstructor(props){\n    super(props);\n    this.state = {\n        open: false\n    }\n}\n\n handleTouchTap = (event) => {\n// This prevents ghost click.\nevent.preventDefault();\n\nthis.setState({\n  open: true,\n  anchorEl: event.currentTarget,\n });\n};\n\nhandleRequestClose = () => {\nthis.setState({\n  open: false,\n});\n};\n\nrender(){\nreturn(\n<div>\n<div id="PaymentPanel">\n<div className="PaymentTitle">Spent Last 14 Days<button className="PaymentToggle" onClick={this.handleTouchTap}>\xe2\x96\xbc</button></div>\n\n  <Popover\n      open={this.state.open}\n      anchorEl={this.state.anchorEl}\n      anchorOrigin={{horizontal: \'left\', vertical: \'top\'}}\n      targetOrigin={{horizontal: \'right\', vertical: \'top\'}}\n      onRequestClose={this.handleRequestClose}\n    >\n    <Menu>\n       <p className="menuItem" onClick={this.clickHandle}>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>\n       <p className="menuItem"  onClick={this.clickHandle}>{this.state.priceBar? "Spent …

我正在努力寻找信息来使用 react-chartjs-2 制作图表。

我使用 react-chartjs-2 制作了一个条形图。我找不到有关使其成为水平条的相关信息。是否可以使用 react-chartjs-2 制作单杠？

我在条形图旁边还有一个饼图。我使用饼图中的相同数据制作条形图。

任何帮助表示赞赏。

这是我的代码。

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  this.update();
  }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
}

update() {
  var piData;
  this.setState({
    piData : piData
  })
 }    

render(){
 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props


  var totalData …

我正在尝试使用 react-chart.js-2 制作条形图。我刚刚注意到所有条形图示例都从数据的最小数量开始，而不是 0。

下面的例子，条形图从40开始，而不是0。我想做的是从0开始做条形图，而不是数据的最小数量。

是否可以使用 react-chart.js2 来实现？

这是代码（主要来自官方示例的代码）

import React from 'react';
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';


const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
 {
  label: 'My First dataset',
  backgroundColor: 'rgba(255,99,132,0.2)',
  borderColor: 'rgba(255,99,132,1)',
  borderWidth: 1,
  hoverBackgroundColor: 'rgba(255,99,132,0.4)',
  hoverBorderColor: 'rgba(255,99,132,1)',
  data: [65, 59, 80, 81, 56, 55, 40]
  }
 ]
 };


export default React.createClass({
displayName: 'BarExample',

render() {
 return (
  <div>
    <h2>Bar Example (custom size)</h2>
    <Bar
      data={data}
      width={150}
      height={100}

    />
  </div>
  ); …

我想通过单击复选框输入将字体粗细从正常更改为粗体.

我试图应用三元运算符,但它不起作用.

bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }

实现此功能的最佳方法是什么？

这是一个codepen演示.

代码

class FontChooser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: true,
            checkboxState : true
        }
    }
    toggle(e) {
        this.setState({
            checkboxState : !this.state.checkboxState
        })
        console.log(!this.state.isChecked)
    }

    render() {
        return(
            <div>
                <input type="checkbox" 
                    id="boldCheckbox"
                    checked={this.state.isChecked}
                    onClick={this.toggle.bind(this)}
                />
               <span 
                   id="textSpan" 
                   bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }
               >
                   {this.props.text}
               </span>
           </div>
       );
    }
}

React.render(
    <div>
        <FontChooser text='Fun with React!' bold='false' />
    </div>,
    document.getElementById('container')
);

谢谢你的好意见.

我在React应用程序中使用Highchart。我想为Highcart制作动画效果。

例如，它显示了上传其他数据的进度。我通过传递进度this.props.progress。但是，我无法将道具传递给Highchart的data属性。

通过更新数据可以制作动画效果吗？最佳做法是什么？

Highchart.js

class Highchart extends React.Component {
static propTypes = {
data: React.PropTypes.array,
text: React.PropTypes.string,
colors: React.PropTypes.array,
size: React.PropTypes.any,
bgcolor: React.PropTypes.string,
width: React.PropTypes.number
}

constructor (props) {
super(props)

this.state = {
  uuid: uuid()
}
}

componentDidMount () {
Highcharts.chart(this.state.uuid, {
  chart: {
    renderTo: 'container',
    type: 'pie',
    width: this.props.width,
    backgroundColor: this.props.bgcolor
  },
  title: {
    text: this.props.text,
    useHTML: true,
    verticalAlign: 'middle',
    floating: true
  },
  plotOptions: {
    pie: {
      shadow: false,
      allowPointSelect: false,
      size: '100%',
      dataLabels: { enabled: false …

我在应用程序中使用了几个三元运算符，但我无法弄清楚如何在单击事件中使用三元运算符。

我正在制作的是一个弹出菜单。一旦菜单项之一已被选择，该菜单项将不可点击。只有另一个菜单项应该是可单击的。

图像

我尝试了以下代码，但没有成功。React 中的点击事件不能使用三元运算符吗？

<p id="menuItem" {!this.sate.priceBar? onClick={this.clickHandle} : "" } style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>

完整代码

class Home extends React.Component{

constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        priceBar: false,
        open: false,
    }
this.handleClick = this.handleClick.bind(this);
this.clickHandle = this.clickHandle.bind(this);
}


 handleClick() {
    this.setState({
        slideOpen : !this.state.slideOpen
    })
 console.log("slideOpen" + !this.state.slideOpen)
 }

 clickHandle() {

 this.setState({ 
          priceBar : !this.state.priceBar,
          open: false
  })
 console.log(!this.state.priceBar)
 }

 handleTouchTap = (event) => …

我正在制作一个饼图，并且正在努力显示每个切片的饼图数据值。因为我的应用程序是用React.js编写的，所以我使用react-chartjs-2。

我找到了针对chart.js的解决方案并尝试实现，但是不适用于react-chartjs-2。

如何在chart.js中显示每个切片的饼图数据值

如何为每个环节增加价值？任何帮助表示赞赏。

这是饼图的当前视图。

根据建议，我实施了chart.piecelabel.js。它还行不通..

我的密码

import {Pie} from 'react-chartjs-2';
import {pieceLabel} from 'chart.piecelabel.js';

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  console.log('-------')
  console.log('parentToggle' + piData )
  console.log('parentToggle' + piData2 )
  console.log('parentToggle' + piData3 )
  console.log('-------')
  this.update();
 }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
}

update() {
  var piData;
  this.setState({
    piData …

我对react-chartjs-2中的条形图有疑问.我在我的应用程序中使用react-chartjs-2制作了条形图和饼图.

我可以使用插件调用Chart.PieceLabel.js 来显示饼图的值.但我找不到条形图的插件.我想显示每个条形图的值与饼图相同.

条形图中的每个条形值是否可能？

目前的观点是这样的.在饼图中,将显示每个切片的值.

这是我的代码

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  this.update();
  }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
    }

update() {
  var piData;
  this.setState({
    piData : piData
  })
}    

  componentDidMount() {
    let ctx = this.refs.chart.chart_instance.chart.ctx;
    console.log(this.refs.chart.chart_instance.chart.ctx); // returns a Chart.js instance reference
    this.refs.chart.chart_instance.chart.config.data.datasets.forEach(function (dataset) {
                if(dataset.type === …

我正在使用React.js创建一个应用程序。我有项目清单。项目列表是可编辑的。

我想在项目列表旁边添加一个title元素，并且应该随着项目数量的增加或减少而更改title元素的高度。

图片

如果项目数减少到3，则应缩短标题元素（建议和常见问题）的高度。如果增加到5，则高度应加宽。

如何实现此功能？我尝试使用内联样式，但失败了。

<div className="titleElement" style={height: this.state.questionItem.length * 20px }></div>

index.js

export default class List extends React.Component {
constructor(props){
    super(props);
    this.state={
        questionItem
    };
}

createItem(item){
    this.state.questionItem.unshift({
        item : item,
    });
    this.setState({
        questionItem : this.state.questionItem
    });
}

findItem(item) {
    return this.state.questionItem.filter((element) => element.item === item)[0];
}

toggleComplete(item){
    let selectedItem = this.findItem(item);
    selectedItem.completed = !selectedItem.completed;
    this.setState({ questionItem : this.state.questionItem });
}

saveItem(oldItem, newItem) {
    let selectedItem = this.findItem(oldItem);
    selectedItem.item = newItem;
    this.setState({ questionItem : this.state.questionItem });
    console.log(this.state.questionItem)
}

deleteItem(item) { …