Как передать значение переменной, которая является функцией, вызывающему

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

Назначьте ссылку на функцию непосредственно на свойство объекта, не выполняя его.Например:

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

Answer 2

Это действительно вопрос о том, как сохранить функцию в объекте и затем передать ее обработчику событий.

Вот демонстрация того, как вы можете это сделать:

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>