Question

import React from 'react';

class App extends React.Component {

    constructor() {
        super();

        this.state = {
            data: 'First Comes First Serves'
        }

        this.updateState = this.updateState.bind( this );
    };

    updateState( e ) {
        console.log( e );
//      console.log( e.target );
        this.setState( {data: e} );
    }

    render() {
        return (
            <div>
                <Content myDataProp = { this.state.data } updateStateProp = { this.updateState }></Content>
            </div>
        );
    }
}

class Content extends React.Component {
    render() {
        return (
            <div>
                <input type="text" value={ this.props.myDataProp } id="id" />
                <div>
                    <button onClick={ this.props.updateStateProp( document.getElementById( 'id' ).value  )}>Click</button>
                </div>
                <h3>{ this.props.myDataProp }</h3>
            </div>
        );
    }
}


export default App;

错误; 未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

我在React很新。

此处，输入值被指定为＆＃39;先来......＆＃39;（我想是这样），但是出现错误，

提前致谢。

Answer 1

当您使用React时，通常最好完全忘记直接在DOM上运行的操作，如getElementById。他们要么根本不工作，要么以意想不到的方式工作。

相反，请看一下优秀的React forms documentation。

在React中执行表单的惯用方法是实现onChange的{{1}}事件处理程序，并将当前值存储在compoenent的状态中。然后您可以使用它访问并在用户按下按钮时使用它。

Answer 2

我完全赞同蒂莫。我已经为你修改了组件：

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      data: 'First Comes First Serves'
    }

    this.updateState = this.updateState.bind(this);
  };

  updateState(e) {
    this.setState({ data: e.target.value });
  }

  render() {
    return (
      <div>
        <Content myDataProp={this.state.data} updateStateProp={this.updateState}></Content>
      </div>
    );
  }
}

class Content extends React.Component {
  render() {
    return (
      <div>
        <input type="text" onChange={this.props.updateStateProp} id="id" />
        <div>
          <button onClick={this.props.updateStateProp}>Click</button>
        </div>
        <h3>{this.props.myDataProp}</h3>
      </div>
    );
  }
}


export default App;

如果你能够让它发挥作用，请告诉我。

React null值DOM操作

2 个答案: