将带有函数的参数发送给子组件并返回给父组件

Question

我有一个名为 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 中的输出现在是“人”而不是值。

我想我可以用以下代码解决这个问题：

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

但是这种方法不再执行该功能。

我该如何解决这个问题？

编辑：Codepen

Answer 1

正如我所怀疑的，只需传递一个对象并确保您接受了 handleClick 函数中的参数

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

或更详细 - 没有语法糖

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

然后你可以用 value.person 来解决它

完整的codepen here

希望对你有帮助

Answer 2

我会尝试handleClick={this.searchForName.bind(this, 'person')}，如果它适合你，请告诉我。

编辑： 我从你的 codepen 更改了片段，它正在工作：

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')} />
    )
  }