React.js如何訪問子組件中的輸入值

Question

我寫了簡單的待辦事項應用程序，但現在我在訪問App（InputForm）的子組件中的輸入值時遇到了麻煩。

也許我需要以某種方式重建結構或邏輯以使其有效？

這是我的App組件：

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( e ){
    e.preventDefault();

    let itemHeading = this.refs.todoInput.value; // TODO Access to input value
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm onSubmit={this.addTodo.bind(this)}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

這是我的InputForm組件：

class InputForm extends React.Component {
  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

感謝幫助。

Answer 1

將input轉換為受控組件 ，並在輸入中的文本發生更改時更新狀態。 單擊提交時，將值發送給處理程序。

刪除refs ，因為它們應該用於需要直接訪問DOM的東西。 這就是文檔對refs反應：

在典型的React數據流中， props是父組件與其子組件交互的唯一方式 。 要修改子項，請使用新道具重新呈現它。 但是，在某些情況下，您需要在典型數據流之外強制修改子項。 要修改的子項可以是React組件的實例，也可以是DOM元素。 對於這兩種情況，React都提供了逃生艙口 。

這是一個不需要這個逃生艙的情況，你應該只使用道具。

帶評論的工作演示：

 const TodoItems = ({ entries }) => ( <ul> {entries.map(({ heading, key }) => ( <li key={key}>{heading}</li> ))} </ul> ); class App extends React.Component { state = { items : [] } // addTodo will receive the needed value without refs addTodo = (heading) => heading !== '' && this.setState(({ items }) => ({ items: items.concat({ // concat returns a new array heading, key: Date.now() }) })); render() { return ( <div className="app-container"> <InputForm onSubmit={this.addTodo}></InputForm> <TodoItems entries={this.state.items} /> </div> ); } } class InputForm extends React.Component { state = { input: '' }; // input change handler onInput = (e) => this.setState({ input: e.target.value }); // submit handler onSubmit = (e) => { e.preventDefault(); this.props.onSubmit(this.state.input); } render (){ return ( <form onSubmit={this.onSubmit}> <input // use value and onChange so it will be a controlled component value={ this.state.value } onChange={ this.onInput } type="text" placeholder="Type your text here" /> <button type="submit">Add to list</button> </form> ) } } ReactDOM.render( <App />, demo ); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="demo"></div> 

Answer 2

您嘗試訪問的refs對象位於InputForm實例上，因此如果您想從App訪問該實例，您還必須在InputForm上添加一個ref。 然后，您可以使用this.refs.InputForm.refs.todoInput訪問它。

話雖如此，最好進行ref回調而不是ref string，因為ref字符串計划從React中刪除。 另外，最好不要過度使用refs。 也許您可以通過onChange事件左右將值保存在父級狀態中。

https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute

Answer 3

我將通過將父對象從父組件傳遞到子組件並直接從子組件訪問父組件的方法來為您提供最簡單的解決方案：

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( value ){

    let itemHeading = value; 
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm parentObject={this}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {

this.onSubmit = this.onSubmit.bind(this);
this.onInput = this.onInput.bind(this);


 onSubmit()
 {
  //invoking parent component function directly by passing parameter to it. 
  this.props.parentObject.addTodo(this.state.value);
 }

onInput(e) {
    this.setState({
      input: e.target.value
    });
  }

  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          value={ this.state.value }
          onChange={ this.onInput }
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}