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で特定の要素を選択する方法
あなたは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;
以下のようなarrow functionブロック内でthis
を使うことを忘れないでください。
print = () => {
var object = this.refs.Progress1;
}
等々...
_編集_
しかし、facebookはそれに対して忠告します。なぜなら、文字列参照にはいくつかの問題があり、レガシーと見なされ、将来のリリースのうちの1つで削除される可能性が高いからです。
ドキュメントから:
従来のAPI:文字列参照
以前にReactを使用したことがある場合は、ref属性が "textInput"のような文字列で、DOMノードがthis.refs.textInputとしてアクセスされる古いAPIに慣れているかもしれません。文字列参照にはいくつかの問題があり、レガシーと見なされ、将来のリリースのいずれかで削除される可能性があるため、これに対して推奨します。現在参照にアクセスするために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 16.3+ では、React.createRef()
を使用して参照を作成します。
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
の要素を取得するにはref
を使用する必要があり、関数内ではReactDOM.findDOMNode
メソッドを使用できます。
しかし、私がもっとやりたいのは、イベント内でrefを呼び出すことです。
<input type="text" ref={ref => this.myTextInput = ref} />
これはあなたが理解するのを助けるためのあるよいリンクです。
あなたは交換することができます
document.getElementById(this.state.baction).addPrecent(10);
によって
this.refs[this.state.baction].addPrecent(10);
<Progressbar completed={25} ref="Progress1" id="Progress1"/>