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({cont: elem});
    }

    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>