import React, {useState, useEffect} from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Clickkk
</button>
</div>
);
}
export default Example
import React, { useState } from 'react'
const LoginControl = (props) => {
const [flag, setFlag] = useState(false)
const [cnt, setCnt] = useState(0)
const changeState = () => {
setFlag(state => {
return !state
})
setCnt(state => {
let newCnt = state
newCnt ++
return newCnt
})
}
let show = <h1 style={{ color: flag ? "red" : "yellow" }}>i see u</h1>
let button = <button onClick={changeState}>clickkkk</button>
return (
<>
{show}
{button}
<div>
<button onClick={() => setCnt(cnt + 1)}>numberrr</button>
<p>{cnt}</p>
</div>
</>
)
}
export default LoginControl
import React, {useState} from 'react';
const SelectVal = (props) => {
const [val, setVal] = useState("请选择");
const changeState = (event) => {
setVal(event.target.value)
}
const showVal = (props) => {
alert(val);
}
return (
<>
<select value={val} onChange={changeState}>
<option value="请选择">请选择</option>
<option value="grapefruit">grapfruit</option>
<option value="lime">lime</option>
<option value="mango">mango</option>
</select>
<button onClick={showVal}>clickkk</button>
</>
)
}
export default SelectVal
import React, {useState} from 'react';
const SubmitName = (props) => {
const[name, setName] = useState("");
const save = (event) => {
setName(event.target.value)
}
const submittt = (props) => {
if(!name) alert("请输入姓名");
else alert(name);
}
return (
<form onSubmit = {submittt}>
<label>
输入：
<input type="text" value={name} onChange={save} />
</label>
<input type = "submit" value="提交" />
</form>
)
}
export default SubmitName
import React, {useState} from 'react';
const Checkkk = (props) => {
const [checkk, setCheckk] = useState(false)
const [cnt, setCnt] = useState(0);
const sum = () => {
let count = cnt;
count ++;
setCnt(count);
realy(count);
}
const mul = () => {
let count = cnt;
count --;
setCnt(count);
realy(count);
}
const realy = (curCnt) => {
if(curCnt >= 9) {
setCheckk(true);
} else {
setCheckk(false);
}
}
return (
<>
<label style={{color : checkk ? "red" : "yellow"}}>
???
<input type="checkbox" checked={checkk} ></input>
</label>
<br />
<input type = "text" value={cnt}/>
<div>
<button onClick={sum}>+</button>
<button onClick={mul}>-</button>
</div>
</>
)
}
export default Checkkk
import React, {useState} from 'react';
const Boil = (props) => {
const[temp, setTemp] = useState(0);
const Boiling = (event) => {
setTemp(event.target.value);
}
return (
<fieldset>
<legend>Enter</legend>
<input value={temp} onChange = {Boiling}/>
<legend>{temp > 100 ? "gulugulu" : "nonono"}</legend>
</fieldset>
)
}
export default Boil
import React, {useContext, useReducer} from 'react'
const intial = {
hello: 'hellooo',
welcome: 'Zlrrr',
sel: 'yellow'
}
const Context = React.createContext()
const helloReducer = (state, action) => {
switch(action.type) {
case 'translateHello': {
if(state === 'hellooo') {
return 'hihihi'
} else {
return 'hellooo'
}
}
case 'setHello': {
return action.value
}
default: return state
}
}
const welcomeReducer = (state, action) => {
return state
}
const selectReducer = (state, action) => {
switch(action.type) {
case 'setSel' : {
return action.value
}
default: return state
}
}
const reducer = (state ,action) => {
return {
hello: helloReducer(state.hello, action),
welcome: welcomeReducer(state.welcome, action),
sel: selectReducer(state.sel, action)
}
}
const HelloInput = (props) => {
const {reducer} = useContext(Context)
const dispatch = reducer[1]
const onChange = (event) => {
dispatch({
type: 'setHello',
value: event.target.value
})
}
return (
<input onChange={onChange}></input>
)
}
const HelloText = (props) => {
const {reducer} = useContext(Context)
const state = reducer[0]
return (
<>
<h1>{state.hello + ' ' + state.welcome}</h1>
</>
)
}
const HelloButton = (props) => {
const {reducer} = useContext(Context)
const dispatch = reducer[1]
const click = () => {
dispatch({
type: 'translateHello'
})
}
return (
<button onClick = {click}>
changee
</button>
)
}
const HelloSelect = (props) => {
const {reducer} = useContext(Context)
const state = reducer[0]
const dispatch = reducer[1]
const change = (event) => {
dispatch({
type: 'setSel',
value: event.target.value
})
}
return (
<select value={state.sel} onChange={change}>
<option value="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
)
}
const App3 = () => {
const contextValue = {
reducer: useReducer(reducer, intial)
}
return (
<Context.Provider value={contextValue}>
<HelloText />
<HelloInput />
<HelloButton />
<br />
<HelloSelect />
</Context.Provider>
)
}
export default App3
import React, {useContext, useReducer} from 'react'
const intial = {
hello: 'hellooo',
welcome: 'Zlrrr',
sel: 'purple'
}
const Context = React.createContext()
const helloReducer = (state, action) => {
switch(action.type) {
case 'translateHello': {
if(state === 'hellooo') {
return 'hihihi'
} else {
return 'hellooo'
}
}
case 'setHello': {
return action.value
}
default: return state
}
}
const welcomeReducer = (state, action) => {
return state
}
const selectReducer = (state, action) => {
switch(action.type) {
case 'setSel' : {
return action.value
}
default: return state
}
}
const reducer = (state ,action) => {
return {
hello: helloReducer(state.hello, action),
welcome: welcomeReducer(state.welcome, action),
sel: selectReducer(state.sel, action)
}
}
const HelloInput = (props) => {
const {reducer} = useContext(Context)
const dispatch = reducer[1]
const onChange = (event) => {
dispatch({
type: 'setHello',
value: event.target.value
})
}
return (
<input onChange={onChange}></input>
)
}
const HelloText = (props) => {
const {reducer} = useContext(Context)
const state = reducer[0]
return (
<>
<h1 style={{color: state.sel}}>{state.hello + ' ' + state.welcome}</h1>
</>
)
}
const HelloButton = (props) => {
const {reducer} = useContext(Context)
const dispatch = reducer[1]
const click = () => {
dispatch({
type: 'translateHello'
})
}
return (
<button onClick = {click} style={{marginLeft: "10px"}}>
changee
</button>
)
}
const HelloSelect = (props) => {
const {reducer} = useContext(Context)
const state = reducer[0]
const dispatch = reducer[1]
const change = (event) => {
dispatch({
type: 'setSel',
value: event.target.value
})
}
return (
<div style={{marginTop: "5px"}} >
<label>
colorrr
<select value={state.sel} onChange={change} style = {{marginLeft: "10px"}} >
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="purple">purple</option>
</select>
</label>
</div>
)
}
const App3 = () => {
const contextValue = {
reducer: useReducer(reducer, intial)
}
return (
<Context.Provider value={contextValue}>
<HelloText />
<HelloInput />
<HelloButton />
<br />
<HelloSelect />
</Context.Provider>
)
}
export default App3
