react 父子组件通信(第二篇)

计数器 子

// 计数器 子
function ChildCount({ value, onClick }) {
	const handleChildChange = e => {
		onClick(e)
	}

	return (
		<>
			<Input
				placeholder='子传父'
				onChange={e => handleChildChange(e.target.value)}
				allowClear
			/>
			<div>父组件传的数据👉:{value}</div>
		</>
	)
}

视频播放组件 子

// 视频播放组件 子
function ChildPlay({ onRef, onClick }) {
	// 暴露出去
	useImperativeHandle(onRef, () => {
		return {
			openPlay,
		}
	})

	const ref = useRef(null)
	const [isPlaying, setPlaying] = useState(false)
	const openPlay = () => {
		const nextIsPlaying = !isPlaying
		setPlaying(nextIsPlaying)
		onClick(nextIsPlaying)
		if (nextIsPlaying) {
			ref.current.play()
		} else {
			ref.current.pause()
		}
	}
	return (
		<>
			<video
				width='250'
				ref={ref}
				onPlay={() => setPlaying(true)}
				onPause={() => setPlaying(false)}
			>
				<source
					src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
					type='video/mp4'
				/>
			</video>
		</>
	)
}

父子通信组件

// 父子通信组件
const FatherForm = () => {
	const modalFormRef = React.createRef()
	const handleClick = () => {
		modalFormRef.current.open()
	}

	const inputRef = useRef(undefined)
	const [count, setCount] = useState(0)
	const handleCount = () => {
		if (!inputRef.current) {
			inputRef.current = 0
		}
		inputRef.current++
		setCount(inputRef.current)
	}

	const [childValue, setChildValue] = useState('')
	const childPlayOnRef = React.createRef()
	const [isPlaying, setPlaying] = useState(false)

	return (
		<>
			<Button onClick={handleClick}>父子通信</Button>
			<ModalFormFK onRef={modalFormRef} title='测试表单'>
				<Row gutter={20}>
					<Col span={12}>
						<Alert message='父组件' type='info' showIcon />
						<Input
							placeholder='父传子'
							onChange={e => setCount(e.target.value)}
							allowClear
						/>
						子组件传的数据👉{childValue}
					</Col>
					<Col span={12}>
						<Alert message='子组件' type='error' showIcon />
						<ChildCount
							value={count}
							onClick={e => {
								setChildValue(e)
							}}
						/>
					</Col>
				</Row>
				<Row>
					<Col span={24}>
						<Button
							type='primary'
							onClick={() => {
								childPlayOnRef.current.openPlay()
								message.success('父调用子的方法')
							}}
						>
							{isPlaying ? '暂停' : '播放'}
						</Button>
						<Button onClick={handleCount}>计数传子</Button>
					</Col>
					<Col span={24}>
						<ChildPlay onRef={childPlayOnRef} onClick={e => setPlaying(e)} />
					</Col>
				</Row>
			</ModalFormFK>
		</>
	)
}