Отправка параметра с функцией в дочерний компонент и обратно в родительский компонент - PullRequest
Новая
       5

Отправка параметра с функцией в дочерний компонент и обратно в родительский компонент

1 голос
/ 06 марта 2019

У меня есть пользовательский компонент с именем InputWithButton, который выглядит следующим образом: 

const InputWithButton = ({ type = "text", id, label, isOptional, name, placeholder = "", value = "", showPasswordReset, error, isDisabled, buttonLabel, handleChange, handleBlur, handleClick }) => (
    <StyledInput>
        {label && <label htmlFor="id">{label}{isOptional && <span className="optional">optioneel</span>}</label>}
        <div>
            <input className={error ? 'error' : ''} type={type} id={id} name={name} value={value} placeholder={placeholder} disabled={isDisabled} onChange={handleChange} onBlur={handleBlur} autoComplete="off" autoCorrect="off" />
            <Button type="button" label={buttonLabel} isDisabled={isDisabled} handleClick={() => handleClick(value)} />
        </div>
        {error && <Error>{Parser(error)}</Error>}
    </StyledInput>
);

export default InputWithButton;

Button является еще одним компонентом и выглядит следующим образом: 

const Button = ({ type = "button", label, isLoading, isDisabled, style, handleClick }) => (
    <StyledButton type={type} disabled={isDisabled} style={style} onClick={handleClick}>{label}</StyledButton>
);

export default Button;

Я использую компонент InputWithButton в родительском компоненте следующим образом: 

render() {
    const { name } = this.state;
    return (
        <React.Fragment>
            <InputWithButton label="Name" name="Name" buttonLabel="Search" value={name} handleChange={this.handleChange} handleClick={this.searchForName} />
        </React.Fragment>
    );
}

Если кнопка нажата, вызывается функция searchForName: 

searchForName = value => {
    console.log(value); //Input field value
}

Это работает, но я хочу добавить к нему еще один параметр, но на этот раз - параметр, исходящий от родительского компонента 

// handleClick={() => this.searchForName('person')}

<InputWithButton label="Name" name="Name" buttonLabel="Search" value={name} handleChange={this.handleChange} handleClick={() => this.searchForName('person')} />

Выходные данные в searchForName теперь представляют собой 'person' вместо значения.

Я думал, что смогу исправить это с помощью следующего кода: 

searchForName = type => value => {
    console.log(type); //Should be person
    console.log(value); //Should be the value of the input field
}

Однако этот подход больше не выполняет функцию.

Как я могу это исправить?

РЕДАКТИРОВАТЬ: Codepen

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

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

handleClick={value => this.searchName({value, person: 'person'})}

или более многословно - без синтаксического сахара

handleClick={value => this.searchName({value: value, person: 'person'})}

тогда вы можете получить это с помощью value.person

полный кодовый код здесь

Надеюсь, это поможет

0 голосов
/ 06 марта 2019

Я бы попробовал handleClick={this.searchForName.bind(this, 'person')}, пожалуйста, дайте мне знать, сработает ли это для вас.

EDIT: Я изменил фрагмент из вашего кодекса, он работает: 

searchName(key, value) {
    console.log(key);
    console.log(value);
  }

  render() {
    const { name } = this.state;

    return (
      <InputWithButton name="name" value={name} buttonLabel="Search" handleChange={this.handleChange} handleClick={this.searchName.bind(this, 'person')} />
    )
  }
...