反應：添加/更改文本輸入基於選定的選項

Question

我試圖根據所選選項顯示新的文本輸入。我可以這樣做，如下所示，但輸入的舊值始終存在，無論我將新選擇選項更改爲何值。

什麼可能是一個更好的方式來實現這一目標？感謝任何建議。

class loadComponent extends React.Component { 
    static propTypes = { 
     ...... 
    }; 
    static defaultProps = { 
    .... 
    }; 
    constructor() { 
    super(); 
    this.state = { 
     value: "" 
    }; 
    } 
    state = { 
     ... 
    }; 

reset = (selected) => { 
     this.setState({ 
     selectedInputName: selected.target[selected.target.selectedIndex].text, 
     selectedInputId: selected.target.value 
     }); 
}; 

makeTextInput =() => { 
    return (
     <TextInput 
      label={this.state.selectedInputName} 
      placeholder={`Please enter ${this.state.selectedInputName} here!`} 
      onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} 
      showClear 
      value={this.state.value} 
     /> 
    ); 
}; 
render() { 
    let newInputText = ''; 
    if (this.state.selectedInputId !== '') { 
     newInputText = this.makeTextInput(); 
    } 
    return (
     <Select 
      label="What would you like to search with?" 
      options={this.props.searchOptions} 
      onChange={selected => this.reset(selected)} 
     /> 
     <div className="search margin_bottom_large"> 
      {newInputText} 
    ); 

Answer 1

makeTextInput函數創建一個新的對象，但是從react的角度來看，它是相同的組件，因爲react通過查看他們type和key區別開來。要做出反應重新創建一個元素，你必須改變其中的一個值。

此代碼改變每個它呈現（因爲NewInputText始終指的是新的功能）時間NewInputText元件的type：

reset = (selected) => { 
     this.setState({ 
     selectedInputName: selected.target[selected.target.selectedIndex].text, 
     selectedInputId: selected.target.value 
     }); 
}; 

makeTextInput =() => { 
    return (
     <TextInput 
      label={this.state.selectedInputName} 
      placeholder={`Please enter ${this.state.selectedInputName} here!`} 
      onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} 
      showClear 
     /> 
    ); 
}; 
render() { 
    let NewInputText =() => ''; 
    if (this.state.selectedInputId !== '') { 
     NewInputText =() => this.makeTextInput(); 
    } 
    return (
     <Select 
      label="What would you like to search with?" 
      options={this.props.searchOptions} 
      onChange={selected => this.reset(selected)} 
     /> 
     <div className="search margin_bottom_large"> 
      <NewInputText /> 
    ); 

此代碼每次不同的密鑰指派給TextInput：

reset = (selected) => { 
     this.setState({ 
     selectedInputName: selected.target[selected.target.selectedIndex].text, 
     selectedInputId: selected.target.value 
     }); 
}; 

makeTextInput =() => { 
    return (
     <TextInput 
      key={Math.random()} 
      label={this.state.selectedInputName} 
      placeholder={`Please enter ${this.state.selectedInputName} here!`} 
      onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} 
      showClear 
     /> 
    ); 
}; 
render() { 
    let newInputText = ''; 
    if (this.state.selectedInputId !== '') { 
     newInputText = this.makeTextInput(); 
    } 
    return (
     <Select 
      label="What would you like to search with?" 
      options={this.props.searchOptions} 
      onChange={selected => this.reset(selected)} 
     /> 
     <div className="search margin_bottom_large"> 
      {newInputText} 
    ); 

Answer 2

不知道你的代碼的其餘部分可能是方便，但你可以嘗試：

makeTextInput =() => (
     <TextInput 
      label={this.state.selectedInputName} 
      placeholder={`Please enter ${this.state.selectedInputName} here!`} 
      onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} 
      showClear 
     /> 
    ); 

change = (event) => { 
    this.setState({ 
     selectedInputName: event.target.value 
    }); 
} 

render() { 
     return (
      <Select 
      label="What would you like to search with?" 
      options={this.props.searchOptions} 
      onChange={this.change} 
      /> 
      <div className="search margin_bottom_large"> 
      {this.makeTextInput()} 
     ); 

您需要做的僅僅是SETSTATE正常。每次更改狀態時，組件都將重新呈現，這意味着將觸發makeTextInput方法。

編輯：

順便說一下，這是好主意，用getter在渲染方法復位元件，在這種情況下：

get textInput() { 
    return (
     <TextInput 
     label={this.state.selectedInputName} 
     placeholder={`Please enter ${this.state.selectedInputName} here!`} 
     onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} 
     showClear 
     /> 
    ); 

} 

，然後在渲染方法，只需要用{this.textInput}

Answer 3

有沒有更好的方法來做到這一點？

我認爲在這種情況下使用controlled component設計模式會很理想。

class SomeInput extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      value: "" //Keep value state here 
     }; 
    } 

    render() { 
     /* Doing something like the following will allow you to clear 
      the input value simply by doing the following.. 

      this.setState({ value: '' }); 
     */ 
     return (
      <Input 
       type="text" 
       onChange={e => this.setState({ value: e.target.value })} // set value state to entered text 
       value={this.state.value} // set value of input to value piece of state 
      /> 
     ); 
    } 
} 

這將給你完全訪問輸入的電流值，從而使您可以將其設置爲任何東西，或清除它在任何時候或任何事件簡單地通過執行以下操作this.setState({ value: '' })。