未从 reactjs 中的输入字段编辑值

Question

所以我有这个输入，用户输入一些字符串，然后我们进行 api 调用并显示一些建议，用户可以 select 建议数据之一。一旦用户选择其中任何一个，我希望输入字段中的数据等于截至目前正在发生。但是用户在选择后无法编辑。我觉得这是反应中的一些受控或不受控制的组件问题。

<SearchRectangle>
          <SearchImageDiv>
          <SearchImg src={SearchImage}/>
          </SearchImageDiv>
          <div>
            <input
                style={{borderRadius:'10px',
                marginLeft:'30px',
                backgroundColor:'rgba(216,216,216,0.41)',
                height:'48px',
                width:'100%',
                  outline: 'none',
                  border: 'none',
                  fontSize: '1.6rem',
                  fontFamily: 'Open Sans',
                  fontWeight: 'normal',
                  fontStyle: 'normal',
                  fontStretch: 'normal',
                  paddingLeft: '10px'
                }}
                value={ this.state.inputValue || this.state.selectedCity || this.state.selectedPincode } onKeyUp={evt => this.updateInputValue(evt)}/>
          </div>

当用户在自动建议中选择任何建议值时，我们会执行此代码。

selectsuggestions =(item)=>{
    if(item.city){
      this.setState({
        selectedCity:item.city,
        inputValue:null,
        selectedPincode:null,
        suggestions:[]
      })
    }
    else{
      this.setState({
        selectedPincode:item.pincode,
        selectedCity:null,
        inputValue:null,
        suggestions:[]
      })
    }
  }

我们正在使用这种方式执行建议。

 <Suggestions selectsuggestions={(e,r)=>this.selectsuggestions(e,r)} results ={this.state.suggestions }/>

Answer 1

使用input标签的value方法时，呈现的 value 链接到 value 的value

所以你有两个选择

1. 在输入onChange上调用setState ，然后value会将新的 state 分配给 UI

2. 使用defaultValue代替value ，这样 UI 呈现就不会被链接