react 中的 input 传值问题

Question

子组件里有一个 input，现在需要做到 input 的 value 既可以由父组件传进去的值决定，也可以通过用户的输入更改，求问怎么写比较好？
========分割线=======
问题没有描述清楚，但是最后解决了orz

Answer 1

import React, { useState, useEffect } from 'react';

export default function Input({
  value = ''
}) {

  const [inputValue, setInputValue] = useState('')

  useEffect(() => {
    setInputValue(value);
  }, [value])

  return (
    <input
      value={inputValue}
      onChange={(e) => { setInputValue(e.target.value) }}
    />
  )
}

Answer 2

那就是或咯？
<input value={state.value || props.value} />

Answer 3

参考antd input的设计，对外暴露onChange方法出来修改传入的value值

Answer 4

提供两个api：defaultValue和onChange，
如果需要支持更多的场景，可以再提供一个value的api。

如果传入defaultValue，则作为input组件内部value的初始值，用户输入的时候改变内部的value，并对通过onChange对外传递修改后的值。