☰

React で DOM 要素にアクセスするにはどうすればいいですか? React の document.getElementById() に相当するものは何ですか? 質問する

tag-icon • tag-icon javascript reactjs getelementbyid
React で DOM 要素にアクセスするにはどうすればいいですか? React の document.getElementById() に相当するものは何ですか? 質問する

react.js で特定のバーを選択するにはどうすればよいですか?

これが私のコードです:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

この React コンポーネントを使用したいと思います:

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

handleClick10 関数を実行し、選択したプログレスバーに対して操作を実行したいのですが、次のような結果になります。

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

react.js で特定の要素を選択するにはどうすればよいですか?

ベストアンサー1

それには、ref

編集:関数コンポーネントを備えた React v16.8.0 では、useRef を使用して ref を定義できます。関数コンポーネントで ref を指定する場合、関数コンポーネント内からuseImperativeHandle特定の関数を公開するために、ref を use の DOM 要素に転送するためにReact.forwardRef を使用する必要があることに注意してください。

元：

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

編集：

React 16.3以降では、React.createRef()ref を作成するために以下を使用します。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

要素にアクセスするには、以下を使用します。

const node = this.myRef.current;

React.createRef() の使用に関するドキュメント

編集

しかし、Facebook は、文字列参照にはいくつかの問題があり、レガシーと見なされ、将来のリリースのいずれかで削除される可能性が高いため、これを推奨していません。

ドキュメントより:

レガシー API: 文字列参照

以前に React を使用したことがある場合は、ref 属性が「textInput」のような文字列で、DOM ノードが this.refs.textInput としてアクセスされる古い API に慣れているかもしれません。文字列参照にはいくつかの問題があり、レガシーと見なされ、将来のリリースで削除される可能性が高いため、この方法はお勧めしません。現在、ref にアクセスするために this.refs.textInput を使用している場合は、代わりにコールバック パターンを使用することをお勧めします。

React 16.2 以前では、コールバック パターンを使用するのが推奨されます。

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

コールバックの使用に関するドキュメント

以前のバージョンのReactでも、以下のような文字列を使用してrefを定義していました。

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

要素を取得するには、

var object = this.refs.Progress1;

this次のように矢印関数ブロック内で使用することを忘れないでください:

print = () => {
  var object = this.refs.Progress1;  
}

等々...

おすすめ記事