react.js의 소품을 통해 사용자 입력 값을 전달하십시오.

2 개의 컴포넌트가 있습니다. 사용자가 입력 한 값을 onChange를 통해 부모 컴포넌트로 전달하는 방법은 무엇입니까? onChange에 '트리거'를 전달할 수 있지만 값을 전달하는 방법은 무엇입니까?react.js의 소품을 통해 사용자 입력 값을 전달하십시오.

https://jsfiddle.net/gboaxm30

var InputComp = React.createClass({ 
    render: function() { 
    return (
    <div> 
    <input type="text" onChange={this.props.newVal} /> 
    </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    inputVal: 0 
    } 
    }, 
    inputChangedHandler(props) { 
    //set user changed value to inputVal 
    console.log(props) 
    }, 
    render() { 
    return(
    <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
);

출처

2016-10-04 Jessica Illy

당신은 이벤트에서

inputChangedHandler(e) { 
     //set user changed value to inputVal 
     console.log(e.target.value) 
    },

출처

2016-10-04 06:57:34 naortor

: http://codepen.io/PiotrBerebecki/pen/pEAQzV는

아이디어는 반작용 문서에 정의 된 소위 제어 입력을 사용하는 것입니다 간단 해? 이 부분 만 바꾸시겠습니까? onChange 이벤트에서 값을 전달할 필요는 없지만 전체 처리기와 함께 제공됩니까? –

'선택'이라면? –

값이 이미 이벤트와 함께 전달되었습니다. 그렇기 때문에 e.target.value에서 값을 가져올 수 있습니다. 당신이 바닐라 js에서 할 것처럼 - 선택과 동일합니다. – naortor

전화 하위 구성 요소의 onChange 이벤트에 함수를 값을 다음 통과 후 e.target.value처럼 입력 값에 액세스해야 부모 구성 요소에 this.props.newVal(e.target.value);

var InputComp = React.createClass({ 
    handleChange(e) { 
    this.props.newVal(e.target.value); 
    }, 
    render: function() { 
    return (
    <div> 
    <input type="text" onChange={this.handleChange} /> 
    </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    inputVal: 0 
    } 
    }, 
    inputChangedHandler(val) { 
    console.log(val); 
    this.setState({inputVal: val}); 
    }, 
    render() { 
    return(
    <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
);

,210

JSFIDDLE

출처

2016-10-04 07:09:06

오, 나는 그것을 얻기 전에 그것을 얻을 수있다, 어느 것이 더 낫다? 첫 번째 또는 두 번째 옵션? 두 번째 옵션은 e.target.val을 사용하여'inputChangedHandler '에서 얻을 수있다. –

refs는 document.getElementById와 마찬가지로 객체에 액세스 할 수 있습니다. ref.name과 마찬가지로 ref.name을 액세스 할 수 있습니다. –

둘 다 똑같이 좋습니다. 위의 방법을 사용하는 경우에만 여러 입력이 있고 선택하면 부모로부터 어떤 함수를 호출 할 것인지 내부적으로 처리 할 수 있습니다. –

내가 여기 당신을 위해 데모를했습니다 : https://facebook.github.io/react/docs/forms.html#controlled-components

var InputComp = React.createClass({ 
    getInitialState() { 
    return { 
     userInput: '' 
    }; 
    }, 

    onChange(event) { 
    this.setState({ 
     userInput: event.target.value 
    }); 
    this.props.newVal(event.target.value); 
    }, 

    render() { 
    return (
     <div> 
     InputComp 
     <input type="text" 
       value={this.state.userInput} 
       onChange={this.onChange} /> 
     </div> 
    ); 
    } 
}); 




var App = React.createClass({ 
    getInitialState() { 
    return { 
    inputVal: '' 
    }; 
    }, 

    inputChangedHandler(valueFromChild) { 
    console.log('valuefromChild:', valueFromChild); 
    this.setState({ 
     inputVal: valueFromChild 
    }); 
    }, 

    render() { 
    return (
     <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ); 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
);

출처

2016-10-04 07:13:20

내 대답에 동일한 데모를 설정 한 것을 볼 수 있습니다. :) –

멋진 :) 매우 일반적인 패턴. 나는 통제 된 입력을 사용하고 있지만. –

react.js의 소품을 통해 사용자 입력 값을 전달하십시오.

답변

관련 문제