React 양식 요소 사용 소개(코드 포함)

이 기사는 React 양식 요소(코드 포함)의 사용법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

오늘은 React Form 요소에 대해 이야기해보겠습니다.

제어 요소

입력 상자의 값을 가져오는 방법을 살펴보겠습니다

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value     {/* 通过事件细节改变inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            <div>
                <input>
                <br>
                <button>{this.props.main}</button>{/*此处的main是来自父组件的传值*/}
            </div>
        )
    }
}
export default Trem;

코드 해석:
this.inp = this.inp.bind(this)를 가리키는 inp 함수를 바인딩합니다.
this.state 초기화 변수
inp() 입력의 입력값을 모니터링합니다.
this.state.inputV 할당을 통해 입력값을 가져옵니다.

textarea 라벨

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.inp = this.inp.bind(this);
        this.sub = this.sub.bind(this);
        this.state = {
            place:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value    
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            <div>
                <textarea></textarea>                
                <br>
                <button>{this.props.main}</button>
            </div>
        )
    }
}

export default Trem;

드롭다운 선택 상자

import React, { Component } from 'react';

class Trem extends React.Component {
    constructor(props){
        super(props);
        this.select = this.select.bind(this);
        this.state = {
            selectV:'coconut'
        }
    };    
    select(e){
        this.setState({
            selectV:e.target.value    
        });
        console.log(e.target.value)
    };        
    render(){
        return (
            <div>                
                <select>
                    <option>Grapefruit</option>
                    <option>Lime</option>
                    <option>Coconut</option>
                    <option>Mango</option>
                </select>
                <br>
            </div>
        )
    }
}

export default Trem;

코드 해석 :
코코넛 옵션은 원래 선택한 속성이 선택되었기 때문에 발생했다는 점을 참고하세요. React에서는 이전에 selected 속성을 사용하지 않지만, 루트 select 태그에 value 속성을 사용하여 선택한 항목을 나타냅니다. 한 곳에서만 구성 요소를 업데이트하면 되므로 제어된 구성 요소에서 더 편리합니다.

간단히 말하면 , 및 <select>는 모두 매우 유사합니다. 모두 값 속성을 전달하여 구성 요소를 제어합니다. </select>

다중 입력에 대한 솔루션
제어된 입력 요소가 여러 개 있는 경우 각 요소에 이름 속성을 추가하여 수행할 작업을 선택하는 event.target.name 값을 기반으로 처리 기능을 만들 수 있습니다.

import React,{Component} from 'react';

class More extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 2
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    };
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
        console.log(event.target.checked,event.target.value)
    };
    render(){
        return (
            

                                 Is going:                                                   
                                 Number of guests:                                               

        )     } } export default More;

코드 해석:

this.setState({
});

es6 계산된 속성 이름 구문

소스 코드 주소: https://github.com/Nick091608...

[관련 권장 사항: react 비디오 튜토리얼]

위 내용은 React 양식 요소 사용 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!