Question

我正在迭代将设置我的React input组件的数组。我面临的问题是我不知道如何将onEmailFilled作为函数传递给handle_changes。

const inputComponentArray= [{id_name : "signin_email", input_label : "Email", input_type : "email", handle_changes: "{onEmailFilled}"}, {id_name : "signin_password", input_label : "Password", input_type : "password", handle_changes: "{onPasswordFilled}"}]

class Test extends Component{
render()
{
  {
    inputComponentArray.map((object => {
    return 
      <VerticalInputComponent
        id_name={object.id_name}
        input_label={object.input_label}
        input_type={object.input_type}
        handle_changes={object.handle_changes} //this is not working because it received a string instead of a function
      />
    }
   ))
 }
}

}

我该如何做？还是有更好的方法呢？我使用map是因为我要创建一个动态表单页面。

这是VerticalInputComponent.js中的另一页。

<input
  id={this.props.id_name}
  name={this.props.id_name}
  className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
  type={this.props.input_type}
  autoComplete="on"
  onChange={this.props.handle_changes}
/>

Answer 1

这实际上是一个关于如何将函数存储在对象中然后将其传递给事件处理程序的问题。

以下是有关如何执行此操作的演示：

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          myInput: [
            {
              id_name: "signin_email",
              input_label: "Email",
              input_type: "email",
              handle_changes: this.onEmailChanged,
              input_value: ""
            }
          ]
      };
  }
  
  onEmailChanged = (e) => {
    const myInputNew = this.state.myInput;
    myInputNew[0].input_value = e.target.value;
    this.setState({ myInput: myInputNew });
  };

  render() {
    return (
      <div>
        <input
          id={this.state.myInput[0].id_name}
          name={this.state.myInput[0].id_name}
          className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
          type={this.state.myInput[0].input_type}
          value={this.state.myInput[0].input_value}
          onChange={this.state.myInput[0].handle_changes}
        />
        <div>Your input: {this.state.myInput[0].input_value}</div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

直接将函数引用分配给对象属性，而不执行它。例如：

const onEmailFilled = () => {
    console.log("onEmailFilled called");
};

const inputComponentArray = [
    {
        id_name: "signin_email",
        /*...*/
        handle_changes: onEmailFilled
    }
];

/*...*/

inputComponentArray.map(object => (
    <VerticalInputComponent
        id_name={object.id_name}
        input_label={object.input_label}
        input_type={object.input_type}
        handle_changes={object.handle_changes}
    />
));

根据函数的来源，您必须添加对它的引用，但不执行它（不添加()）

来自道具：handle_changes: this.props.onEmailFilled
来自类方法：handle_changes: this.onEmailFilled
来自常量：handle_changes: onEmailFilled

如何将作为函数的变量值传递给调用

2 个答案: