Реагируйте круговой диаграммой с помощью ползунка диапазона без использования состояния - PullRequest
Новая
       57

Реагируйте круговой диаграммой с помощью ползунка диапазона без использования состояния

0 голосов
/ 15 февраля 2019

Я хочу нарисовать круговую диаграмму в реакции.при изменении диапазона ползунка круговая диаграмма должна меняться в зависимости от значения ползунка диапазона.Мы не можем использовать состояние в назначении.проблема в том, что я новичок в реакции и не знаю, как изменить значение дочернего атрибута (в моем случае - штрих-черточку) от родительского без использования состояния, которое должно быть отражено на круговой диаграмме.

любой, пожалуйста, помогите мне.весь мой код ниже. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Raect Aiignment - PI Chart</title>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> -->
        <script src="https://unpkg.com/chart.js@2.7.2/dist/Chart.bundle.js"></script>
        <!--  chartkick dependency on chart.js -->
        <script src="https://unpkg.com/react-chartkick@0.3.0"></script>
        <style>
        .circle_style
        {
            fill: #f4fc16;
            stroke: #DF5C24;
            transition: stroke-dasharray 1s linear infinite
        }
        .svg_style {
            background: #f4fc16;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">

        const svgVars = {
            svgWidth: 100,
            svgHeight: 100,
            defaultRadius: 25,
            cX: 50,
            cY: 50,
            defaultStrokeWidth: 50, // 2*circleRadius = 50
        };

        const circumferenceWidth = () => Math.PI * 2 * svgVars.defaultRadius;
        var dashWidth = (rangeSliderValue = 50) => {
            return ( rangeSliderValue * circumferenceWidth() / 100).toFixed(3)  ;
        };


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

            render() {
                return (
                    <form id="slider_form" role="form">
                        <input type="range" min={0} max={100} defaultValue={25} step={1} onChange={this.props.doAfterSlide} />
                    </form>
                );
            }
        }

        class Head extends React.Component {
            render() {
                return (
                    <h1>PI Chart with range slider</h1>
                );
            }
        }

        class Chart extends React.Component {
            render() {
                let cirStyle = {
                        strokeDasharray: `${ dashWidth() } ${ circumferenceWidth() }`,
                        strokeWidth: svgVars.defaultStrokeWidth
                }
                return (
                    <svg width={ svgVars.svgWidth } height={ svgVars.svgHeight } className="svg_style">
                        <circle r={ svgVars.defaultRadius } cx={ svgVars.cX } cy={ svgVars.cY } style={ cirStyle } className="circle_style" />
                    </svg>
                );
            }
        }

        class PieChart extends React.Component {
            constructor(props) {
                super(props);
                // This binding is necessary to make `this` work in the callback
                this.updatePiechart = this.updatePiechart.bind(this);
            }
            updatePiechart(e) {
                let sliderValue = e.target.value;
                let dw = dashWidth(sliderValue);

                console.log(dw);
                console.log("hello");
            }
            render() {
                return (
                    <div>
                        <Head />
                        <Slider doAfterSlide={this.updatePiechart} />
                        <Chart />
                    </div>
                );      
            }
        }


        /**
         * Render
         * 
         */
        ReactDOM.render(
            <PieChart />,
            document.getElementById('root')
        );

        </script>
    </body>
</html>

1 Ответ

0 голосов
/ 15 февраля 2019

Вы можете сохранить новое значение dashWidth в глобальной переменной или свойстве класса PieChart и передать это значение в Chart через реквизиты.

Затем вызовите this.forceUpdate (), чтобы заставить PieChart перерисовывать при его изменении.

Обратите внимание, я бы никогда не сделал этого в реальном коде, вместо этого я бы использовал state, поскольку именно для этого и предназначен state.Запрещение использования state является действительно странным ограничением для назначения с использованием React.

...