javascript - defaultValue 不会改变...下拉 react

Question

我有一个下拉列表，可以从提取中获取它的选项，当我选择并选择另一个提取时，请求将其保存到数据库中，然后它将其返回到状态中，因此所选值现在处于状态中。但!我的下拉列表不会更新所选值，即使它在数据库中正确更新也是如此。

下拉列表:

<Form.Field className="dropdown">
   <label>{answer.answerText}</label>
   <Dropdown  
    key={ answer.name } 
    value={answer.value <!--THIS IS UPDATED AFTER SELECTION, BUT DOESN'T SHOW -->} 
    style={{paddingLeft: pad}} 
    onChange={(e) => this.blurHandler(e.target.textContent,answer)}  
    name={ answer.name } 
    disabled={answer.settings.disabled} 
    options={answer.dropdownOptions}
   />
</Form.Field>

被调用的方法。

blurHandler(e,answer) {
    var answerValue = e;
    var projectId = this.props.projectId;
    this.props.updateAnswer('/api/update-answer', 
      answer.questionId,
      projectId,
      answer._id, 
      answerValue, 
      answer.settings.answerType
      );
}

updateAnswer 所做的只是获取将值保存到数据库中的项目答案。

Answer 1

您的问题标题为 defaultValue 但您没有在 Dropdown 组件中的任何地方使用该 Prop 。当您在 Dropdown 组件或任何 SUIR 组件中定义一个 value 时，这意味着您必须自己控制所有其他输入交互，并且您会失去SUIR 组件附带的框状态控件。在某些情况下，您肯定需要这个。

我建议将您的 value 属性更改为 Dropdown 上的 defaultValue 属性，这应该可以满足您的期望。 Dropdown 只会使用该值初始化自身，但它会按照您期望的方式在 UI 中进行更改。