Apakah komponen terkawal dalam tindak balas

Dalam React, komponen terkawal ialah komponen yang menggunakan keadaan untuk mendapatkan dan menetapkan nilai elemen input; ia juga boleh difahami bahawa komponen React yang menjadikan borang juga mengawal operasi yang berlaku pada bentuk semasa proses input pengguna, dan digunakan oleh elemen input React to Form yang mengawal nilainya dengan cara ini dipanggil komponen terkawal.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah komponen terkawal dalam React?

Tapak web rasmi React menerangkan komponen terkawal seperti ini: Komponen React yang menjadikan borang juga mengawal operasi yang berlaku pada borang semasa input pengguna. Elemen input bentuk yang nilainya dikawal oleh React dengan cara ini dipanggil "komponen terkawal".

Komponen yang menggunakan keadaan untuk mendapatkan dan menetapkan nilai elemen input dipanggil komponen terkawal. Teg seperti 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3 dan 221f08282418e2996498697df914ce4e semuanya boleh menggunakan atribut nilai untuk melaksanakan komponen terkawal.

Sesetengah netizen menjelaskan perkara ini: Dalam React, apabila keadaan borang berubah, ia akan ditulis kepada keadaan komponen jenis ini dipanggil komponen terkawal dalam React.

Proses kemas kini komponen terkawal:

1, anda boleh menetapkan nilai lalai borang dalam keadaan awal

2, apabila nilai borang berubah, panggil onChange pengendali acara,

3, pengendali acara mendapat keadaan berubah melalui objek acara e dan menukar keadaan

4, setState mencetuskan kemas kini paparan dan melengkapkan kemas kini komponen borang; nilai

Contoh: input

- Halang penyerahan borang

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

- input jenis fail

// file类型的input，属性value是只读的，所以是非受控组件
<input type="file" />

Pembelajaran yang disyorkan : " tutorial video reaksi》

Atas ialah kandungan terperinci Apakah komponen terkawal dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!