Q&A
正攻法としては「標準価格欄もReact管理にする」ということになりますが、それができない事情はありますでしょうか？
前提・実現したいこと
React外の入力欄である標準価格(id=default-price)の値を変更するとReact内の入力欄であるの価格を更新する方法が知りたいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Reactテスト</title> 6</head> 7<body> 8<label for="default-price">標準価格</label> 9<input id="default-price" value="10"> 10 11<hr> 12 13<div id="react-sample"></div> 14 15<script src="//unpkg.com/react@16/umd/react.development.js" 16 crossorigin></script> 17<script src="//unpkg.com/react-dom@16/umd/react-dom.development.js" 18 crossorigin></script> 19<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script> 20<script type="text/babel"> 21 'use strict'; 22 23 class ReactSample extends React.Component { 24 constructor(props) { 25 super(props); 26 this.state = {price: 0, total: 0}; 27 } 28 29 handleChange = (ev) => { 30 const price = ev.target.value; 31 const total = (price * 1.1).toFixed() 32 this.setState({price, total}); 33 } 34 35 render() { 36 37 return ( 38 <div> 39 <p> 40 <label> 41 <strong>価格：</strong> 42 <input value={this.state.price} onChange={this.handleChange}/>円 43 </label> 44 </p> 45 <p> 46 <strong>税込：</strong><span>{this.state.total}</span>円 47 </p> 48 </div> 49 ); 50 } 51 } 52 53 ReactDOM.render( 54 React.createElement(ReactSample), 55 document.getElementById('react-sample') 56 ); 57</script> 58</body> 59</html>
試したこと
標準価格をReactコンポーネントのpropsで渡すとかでできるのか試してみましたが、今のところ良い方法が見つかりません。
回答1件
0
いちおう、React内から標準価格のエレメントにDOM経由で変更時のイベントリスナーを入れて、そこからsetStateを行ってReactの状態変化を起こす、というような方法はありえます。
投稿2022/01/07 00:31
編集2022/01/07 00:39総合スコア146063
あなたの回答
tips
プレビュー
