Question

我有this，它显示了我创建的输入组件：

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';

在fiddle中，我没有连接任何道具：

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

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

我的输入是不是以某种方式控制输入？

Answer 1

由于以下原因而无法控制：

http(s)://<bucket-name>.s3.amazonaws.com/<key>
http(s)://<region>.amazonaws.com/<bucket-name>/<key>

由于值未定义，因此该字段将不受控制，以验证使用此：

value = { value } //value = undefined

它的行为方式相同。

选中 fiddle 。

Answer 2

Input组件的问题在于，如果你传递一个值道具而没有通过默认情况下分配输入中的onChange道具，那么最终会得到一个静态值并且将无法再更改该值。的 DEMO

它在当前状态下工作，因为它被处理为不受控制的输入，因为value属性未定义。

我建议您传递道具并对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 }

当没有道具通过时，如何更新受控组件输入的值

2 个答案: