当没有传递道具时，此反应如何控制组件输入的值更新

Question

我有这个这表明我已经创建了一个输入组件：

const Input = ({
  onChange = () => {},
  invalid,
  type = 'text',
  placeholder = '',
  className,
  value,
  ...rest
}) =>
  <input
    onChange={onChange}
    type={type}
    placeholder={placeholder}
    autoComplete="off"
    value={value}
    {...rest}
  />;

Input.displayName = 'Input';

在小提琴中 ，我没有连接任何道具：

const MyComponent = function(props){
    return <div><Input /></div>;
}; 

但是，当我在输入中键入文本时，即使没有将value prop或onChange处理程序传递给组件，输入的值也会更改。

我的输入不是控制输入吗？

Answer 1

由于以下原因，它不受控制：

value = { value }    //value = undefined

由于值是不确定的，因此该字段将变得不受控制，请使用以下命令进行验证：

value = {undefined}

它的行为方式相同。

检查这个小提琴 。

Answer 2

Input组件的问题在于，如果您传递值prop而不通过onChange属性，而onChange属性会在您的输入中被默认分配，那么您将获得一个静态值，并且将不再能够更改该值。 演示

它在当前状态下工作，因为值属性未定义，因此将其视为不受控制的输入。

我宁愿建议您传递道具并在输入中进行propType验证，以获取required onChange and value prop

const Input = ({
  onChange = () => {},
  invalid,
  type = 'text',
  placeholder = '',
  className,
  value,
  ...rest
}) =>
  <input
    onChange={onChange}
    type={type}
    placeholder={placeholder}
    autoComplete="off"
    value={value}
    {...rest}
  />;

Input.displayName = 'Input';

Input.propTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired
}