Reactでのフォームの使い方を詳しく解説

今回はReactでフォームを使用する際の注意点について、実際の事例を交えて詳しく解説していきます。

Form

Reactは一方向のデータフローフレームワークであるため、フォーム要素は他のDOM要素とは異なり、操作も双方向バインディングフレームワークとは大きく異なります。なので、ここでは別途お話します。

制御された入力

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:/" 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>
        )        
    }
}

エフェクトプレビュー

textarea要素

通常のHTMLでは、textarea要素はノードのテキスト値ですrrreeeしかし、Reactでは、この要素は使用する必要がありますvalue 属性。
rrreee

select 要素

通常の HTML では、select 要素にデフォルトの selected 値を指定するには、属性 selected を対応する <code>option に追加する必要があります。 > code>rrreee
しかし、React では、属性 value を与えるだけで済みます

rrreee🎜入力ファイル要素🎜🎜 なぜなら <input type="file"> は特別な要素であり、読み取り専用であるため、React での特別な処理には ref を使用する必要があります🎜rrreee🎜 この記事の事例を読んだ後は方法をマスターしたと思います。刺激的なことは、php に注目してください。中国の Web サイトのその他の関連記事もご覧ください。 🎜🎜推奨読書: 🎜🎜🎜react で選択された li を強調表示する手順の詳細な説明🎜🎜🎜🎜🎜 JS での JSON および Math ユースケース分析🎜🎜🎜

以上がReactでのフォームの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。