React에서 양식을 사용하는 방법에 대한 자세한 설명

이번에는 React에서 폼을 사용할 때 자세한 설명을 들고 왔습니다. React에서 폼을 사용할 때의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Form

React는 단방향 데이터 흐름 프레임워크이므로 양식 요소가 다른 DOM 요소와 다르며 작업도 양방향 바인딩 프레임워크와 매우 다릅니다. 그래서 여기서는 따로 이야기하겠습니다.

Controlled input

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    render(){
        return (
            <p>
                <p><label>写死value-锁定状态</label><input type="text" value="hello react"/></p>
                <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </p>
        )        
    }
}
ReactDOM.render(<Component1 />, document.getElementById('p1'));

이 사례는 React에서 단방향 데이터 흐름으로 인해 값이 제공된 후에 양식 요소를 다시 수정할 수 없으므로 <a href="http:/%20/www.php.cn/wiki/1464.html" target="_blank">onChange<code><a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a> 事件来完成。所以上面的案例应该是这样的

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <p><label>写死value-锁定状态</label><input type="text" value="hello react" onChange={this.change}/></p>
                <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onChange={this.change}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </p>
        )        
    }
}

效果预览

textarea 元素

在普通 HTML 中，textarea 元素是节点文本值

<textarea>
  Hello there, this is some text in a text area
</textarea>

但在 React 中，该元素需要使用 value 属性。

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <textarea value={this.state.text} onChange={this.change}/>
            </p>
        )        
    }
}

select 元素

在普通 HTML 中， select元素要指定默认选中值，就得在对应的option中加上属性selected

<select>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option selected value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

但在 React 中，只需要给定属性value即可

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'lime'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <select value={this.state.text} onChange={this.change}>
                    <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">Mango</option>
                </select>                
            </p>
        )        
    }
}

input file 元素

因为<input type="file">是特殊的元素，它是只读的，所以在 React 中需要用ref 이벤트를 완료합니다. 따라서 위의 경우는 다음과 같아야 합니다

class Component1 extends React.Component{
    submit = (e) => {
        console.log(this.file.files)
    }
    render(){
        return (
            <p>
                <input type=&#39;file&#39; ref={input => {this.file = input}}/>
                <input type="button" value="submit" onClick={this.submit} />
            </p>
        )        
    }
}

Effect Preview

textarea 요소

일반적인 HTML에서 textarea 요소는 노드 텍스트 값입니다rrreee그러나 React에서는 이 요소를 사용해야 합니다. 값 속성.
rrreee

select 요소

일반 HTML에서 select 요소가 기본 선택 값을 지정하려는 경우 해당 옵션에 <code>selected 속성을 추가해야 합니다. code> code>rrreee
하지만 React에서는 <input type="file"> 때문에 value

rrreee🎜input file element🎜🎜 속성만 지정하면 됩니다. code >는 특수 요소이므로 읽기 전용이므로 React에서 특수 처리를 하려면 ref를 사용해야 합니다.🎜rrreee🎜이 기사의 사례를 읽으신 후에는 방법을 익히셨을 것입니다. 더 흥미로운 내용은 중국 웹사이트의 PHP 기타 관련 기사에 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜반응에서 강조 표시를 선택하는 단계에 대한 자세한 설명🎜🎜🎜🎜🎜JS의 JSON 및 수학 사용 사례 분석🎜🎜🎜

위 내용은 React에서 양식을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!