React：選択したオプションのテキスト入力ベースの追加/変更

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は彼らのtypeとkeyを見て、それらを区別するためreactの視点から、それは同じコンポーネントです。要素を再作成するには、それらの値の1つを変更する必要があります。

このコードは（NewInputTextが常に新しい機能を参照するため）、それはレンダリングするたびにtypeNewInputTextの要素を変更：

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メソッドがトリガーされます。

EDIT：

方法によって、この場合には、renderメソッドでコンポーネントを返すため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: '' })を行うことにより、いつでも、または任意のイベントのためにそれをクリアすることができ、あなたの入力の現在値へのフルアクセスを提供します。