昇格ステータス
昇格ステータス
[ドラッグ状態](Drag Status)と[リアクター](Reactor)が一方向データストリームであるという原則に従って、サブエレメントから上部エレメントに移動することはできません.ただし、親構成部品の[状態を変更する関数](Change Status Function)自体を子構成部品に渡すことで、子構成部品で関数を実行することでこの問題を解決できます.
コールバック関数はコールバック関数としてpropsを渡し、コールバック関数はパラメータとしてpropsを渡します.これは内部状態を変更する関数です.コールバック関数をサブ関数に送信し、サブ関数から呼び出すと、親関数のステータスが変更されます.
1)例
function Parent Component() {
const [value, setValue] = useState("날 바꿔줘!")
const handleChangeValue = () => {
setValue("완젼히 달라진 값!")
}
return {
<div>
<div>값은 {value} 입니다.</value>
<ChildComponet handleButtonClick = {handleChangeValue} /> //하위 컴포넌트에 함수를 전달!
</div>
}
}
function ChildComponent({handleBuffonClick}) { // 비구조화 할당
const handleClick = () => {
handleButtonClick('넘겨줄께 자식이 원하는 값!')
}
return (
<button onClick = {handleClick}>값 변경</button>
)
}
2)例
所定の温度で水が沸騰するか否かを推定する温度計算器
// 컴포넌트 작성
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
// 변환 함수 작성
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}
}
// 변경
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} /> //리액트에 다시 렌더링하도록 요청함
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
//2단계 : input 추가하기
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onTemperatureChange({temperature: e.target.value}); //변경!
//이 컴포넌트의 props는 부모 컴포넌트인 calculaotr로부터 제공받은 것
}
render() {
const temperature = this.props.temperature; //state를 props로 변경
//자신의 부모인 calculator로부터 props를 건네받음
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
Reference
この問題について(昇格ステータス), 我々は、より多くの情報をここで見つけました
https://velog.io/@tastestar/State-끌어올리기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
function Parent Component() {
const [value, setValue] = useState("날 바꿔줘!")
const handleChangeValue = () => {
setValue("완젼히 달라진 값!")
}
return {
<div>
<div>값은 {value} 입니다.</value>
<ChildComponet handleButtonClick = {handleChangeValue} /> //하위 컴포넌트에 함수를 전달!
</div>
}
}
function ChildComponent({handleBuffonClick}) { // 비구조화 할당
const handleClick = () => {
handleButtonClick('넘겨줄께 자식이 원하는 값!')
}
return (
<button onClick = {handleClick}>값 변경</button>
)
}
// 컴포넌트 작성
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
// 변환 함수 작성
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}
}
// 변경
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} /> //리액트에 다시 렌더링하도록 요청함
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
//2단계 : input 추가하기
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.onTemperatureChange({temperature: e.target.value}); //변경!
//이 컴포넌트의 props는 부모 컴포넌트인 calculaotr로부터 제공받은 것
}
render() {
const temperature = this.props.temperature; //state를 props로 변경
//자신의 부모인 calculator로부터 props를 건네받음
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
Reference
この問題について(昇格ステータス), 我々は、より多くの情報をここで見つけました https://velog.io/@tastestar/State-끌어올리기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol