输入字段需要两个受控和非受控

我有呈现这样的输入字段：输入字段需要两个受控和非受控

class InputSection extends Component { 
    constructor(props) { 
     super(props); 
     this.onChange = this.onChange.bind(this); 
    } 

    handleChange(event) { 
     this.props.onChange(event.target.name, event.target.value); 
    } 

    render() { 
     return (
      <input type="text" 
       name="topicInputText" 
       value={this.props.formValues['topicInputText']} 
       onChange={this.props.onChange} 
      /> 
     ); 
    } 
}

有为什么我value绑定到this.props.formValues对象的条目2（感知）的原因：

我需要一个默认值
我需要重新输入字段的能力，当用户点击“重置”按钮来传递。该复位按钮触发Redux的作用，这导致在传入的为道具

的onChange事件处理程序，这是处理了组分链的formValues对象物的变化，触发一个终极版动作，其更新所述存储的状态驱动作为道具传入的formValues对象。

但是，当我使用键盘，我得到这个控制台的警告输入到输入字段：

警告：InputSection正在改变类型的文本的不受控制的输入进行控制。输入元素不应从未受控制的切换到受控（反之亦然）。决定在组件的使用期限内使用受控制的或不受控制的输入元素。

我想这是因为我的输入组件被“管理”（因为我绑定它是value）。但是，如果我不能绑定它value如何设置它的初始值或稍后重置值？

来源

2017-05-25 Jonathan.Brink

这并不回答你的问题，虽然它可能会解决警告：你输入中的'onChange'应该指向'handleChange'，而不是'this.props.onChange'。 – anbnyc

@anbnyc感谢您的支持......实际上，我在实际的代码中正确使用了它，但是在简化示例时错误地键入了它。我更新了我的代码示例 –

这通常意味着您在给定未定义值和定义值之间切换。我猜测formValues["topicInputText"]在第一次渲染时不存在。

您需要确保您传入的初始值不是undefined。

来源

2017-05-25 18:54:27 markerikson

输入字段需要两个受控和非受控

回答

相关问题