Test4_State.cshtml

@{
    ViewBag.Title = "Test4_State";
}

<h2>Test4_State</h2>
<div id="app1"> </div>
<hr />
<div id="app2"> </div>

@* React *@
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

<script type="text/babel">


    class ReactComponent1 extends React.Component {

    constructor(props) {
    super(props);
    this.state = { date: new Date() };
    }

    render() {
    return (
    <div>
        <p>React Component, from class</p>
        <p>Say: {this.state.date.toTimeString()} </p>
    </div>
    );
    }
    }

    class ReactComponent2 extends React.Component {

        constructor(props) {
            super(props);
            this.state = { counter: 0, cont: { field_int: 1} };

            @* Прикрепление текущего объекта к this в функции обработки *@
            this.OnClick_Minus = this.OnClick_Minus.bind(this);
            this.OnClick_Plus = this.OnClick_Plus.bind(this);
            this.OnChange = this.OnChange.bind(this);
            this.OnClick_Plus2 = this.OnClick_Plus2.bind(this);
        }

        OnClick_Minus(){
            @*this.setState({counter: this.state.counter-1});*@

            @*При наличии нескольких вызовов setState() React может
            объединять их в один общий пакет обновлений для увеличения производительности.
            Так как объекты this.props и this.state могут обновляться асинхронно,
            не стоит полагаться на значения этих объектов для вычисления состояния.*@
            this.setState(function(prevState, props) {
            return {counter: this.state.counter-1};
        });
        }
    
        OnClick_Plus(e){
            console.log(e);
            console.log(e.target.getAttribute("rowid"));
            this.setState({counter: this.state.counter+1});
        }

        OnChange(e){
            console.log(e);
            console.log(e.target.value);
            console.log(e.target.getAttribute("rowid"));
        }

         OnClick_Plus2(e){
            console.log("press");
            var elem = this.state.cont;
            console.log(elem);
            elem.field_int += 1;

            this.setState();
        }

        render() {
            return (
            <div>
                <input type="text" rowid="" onChange={this.OnChange} /><br />

                <p>Counter: { this.state.counter } </p>

                <button onClick={this.OnClick_Minus}>Counter--</button>
                <button onClick={this.OnClick_Plus}>Counter++</button>
                <button onClick={this.OnClick_Plus2}>Изменение объекта в state по ссылке</button>
            </div>
            );
        }
    }


    ReactDOM.render(
    <ReactComponent1 />,
    document.getElementById("app1")
    )
    ReactDOM.render(
    <ReactComponent2 />,
    document.getElementById("app2")
    )

</script>