同步操作将从 徐智昊/30-Days-Of-React 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
In the previous day challenge we have covered controlled inputs. In react most of the time we use controlled inputs as recommended on the official documentation of React.
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. In uncontrolled input we get data from input fields like traditional HTML form data handling.
An example of uncontrolled component
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
firstName = React.createRef()
handleSubmit = (e) => {
e.preventDefault()
console.log(this.firstName.current.value)
}
render() {
return (
<div className='App'>
<form onSubmit={this.handleSubmit}>
<label htmlFor='firstName'>First Name: </label>
<input
type='text'
id='firstName'
name='firstName'
placeholder='First Name'
ref={this.firstName}
/>
<button type='submit'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
We can grab multiple input data from DOM. We are not directly targeting the DOM but React is getting data from DOM using ref.
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
firstName = React.createRef()
lastName = React.createRef()
country = React.createRef()
title = React.createRef()
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
console.log(this.firstName.current.value)
console.log(this.lastName.current.value)
console.log(this.title.current.value)
console.log(this.country.current.value)
const data = {
firstName: this.firstName.current.value,
lastName: this.lastName.current.value,
title: this.title.current.value,
country: this.country.current.value,
}
// the is the place we connect backend api to send the data to the database
console.log(data)
}
render() {
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<div>
<input
type='text'
name='firstName'
placeholder='First Name'
ref={this.firstName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='lastName'
placeholder='Last Name'
ref={this.lastName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='country'
placeholder='Country'
ref={this.country}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='title'
placeholder='Title'
ref={this.title}
onChange={this.handleChange}
/>
</div>
<button className='btn btn-success'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
Most of the time we use controlled input instead of uncontrolled input. In case if you want to target some element on the DOM you will use ref to get the content of that element. Don't touch directly using pure JavaScript. When you develop a React application do not touch the DOM directly because React has its own way of handling the DOM manipulation.
🎉 CONGRATULATIONS ! 🎉
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。