reactjs - React 类组件方法的参数是如何工作的？

Question

我正在学习 React，并且很难理解类组件的方法参数是如何工作的。在下面的代码中，handleAddOption 方法（它有助于在单击按钮时添加项目，它是一个待办事项应用程序）——它采用“选项”作为参数——但我没有看到渲染方法中提供的参数。

同样，在 AddOption 组件中，handleAddOption 有一个参数 'option' -这是从哪里来的？

我是 React 和 stackoverflow 的新手，我可能没有遵循的任何规范请指出。谢谢您的帮助。

class App extends React.Component {
  constructor(props) {
    super(props);   
    this.handleAddOption = this.handleAddOption.bind(this);
    this.state = {
      options: []
    };
  }
  handleAddOption(option) {
    if (!option) {
      return 'Enter valid value to add item';
    } else if (this.state.options.indexOf(option) > -1) {
      return 'This option already exists';
    }

    this.setState((prevState) => {
      return {
        options: prevState.options.concat(option)
      };
    });
  }
  render() {                                                                                                                  
    return (
      <div>
        <div>{this.state.options.map((option) => <p>{option}</p>)}</div>
        <AddOption handleAddOption={this.handleAddOption} />
      </div>
    );
  }
}
class AddOption extends React.Component {
  constructor(props) {
    super(props);
    this.handleAddOption2 = this.handleAddOption2.bind(this);
    this.state = {
      error: undefined
    };
  }
  handleAddOption2(e) {
    e.preventDefault();
    const option = e.target.elements.option.value.trim();
    const error = this.props.handleAddOption(option);
    this.setState(() => {
      return { error };
    });
  }
  render() {
    return (
      <div>
        {this.state.error && <p>{this.state.error}</p>}
        <form onSubmit={this.handleAddOption2}>
          <input type="text" name="option" />
          <button>Add Option</button>
        </form>
      </div>
    );
  }
}



render(<App />, document.getElementById('app'));

标签： reactjs

Answer 1

参数由附加到表单的提交处理程序传递。

您提供了一个函数，只要有提交事件，就可以调用该函数。该表单将使用通常传入的参数调用您提供的任何函数。

这与在普通 JS 中发生的方式相同：

const form = document.getElementById("form");

form.addEventListener("submit", e => {
  e.preventDefault();
  console.log("submit 1");
});

const submitHandler = e => {
  e.preventDefault();
  console.log("submit 2");
};

form.addEventListener("submit", submitHandler);

<form id="form">
  <input type="submit" />
</form>

考虑 React 示例：

class MyForm extends React.Component {
  constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      foo:""
    }
  }
  handleSubmit(e) {
    e.preventDefault();
    console.log("MyForm Submit 1");
    this.setState(state => ({
      foo: "foo"
    }));
  }
  render() {
    /*
     onSubmit will always call the function that is provided
     with a submit event argument.
     */
    return (
      <form onSubmit={this.handleSubmit}>
        <div>{this.state.foo}</div>
        <input type="submit"/>
      </form>
    )
  }
}

class MyOtherForm extends React.Component {
  constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      foo:""
    }
  }
  handleSubmit(e) {
    e.preventDefault();
    console.log("MyForm Submit 2");
    this.setState(state => ({
      foo: "bar"
    }));
  }
  render() {
    // Here we will pass the argument explicitly
    return (
      <form onSubmit={e => this.handleSubmit(e)}>
        <div>{this.state.foo}</div>
        <input type="submit"/>
      </form>
    )
  }
}

const App = () => {
  return(
    <div>
      <MyForm/>
      <MyOtherForm/>
    </div>
  );
};

ReactDOM.render(<App/>, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="app"></div>