Question

所以我正在建立一个自定义选择字段。问题是选择包装器和选项是不同的组件，因此创建这样的选择的代码将是：

<SelectComponent onChange={usersFunction}>
    <OptionComponent value="value 1" />
    <OptionComponent value="value 2" />
    <OptionComponent value="value 3" />
</SelectComponent>

更具体地说，问题是我不知道如何让SelectComponent知道何时点击选项并点击了女巫选项（我不想将任何其他功能传递到上面的代码中）。我希望它只有onChange函数。）

我现在正在做的是在SelectComponent渲染功能中我将props.children中的每个孩子包装到另一个具有onClick属性的div中。

这样的事情：

render() {
  return {
      this.props.children.map(function(item, index){
          return (
              <div key={index} onClick={this.handleClickMethod.bind(this, item, index)}>{item}</div>
          )
      })
  }
}

虽然这有点工作，但我对解决方案并不满意。可能还有其他更多＆＃34;反应＆＃34;溶液

Answer 1

您可以使用React.cloneElement()向儿童添加其他道具，例如：

render() {
  let self=this;
  return (
    {self.props.children.map(child, index) => {
      return React.cloneElement(child, {
        onClick: self.handleClickMethod.bind(self, child, index)
      })
    })}
  )
}

然后你可以将处理程序添加到props中，而不需要额外的包装器<div>

更新：或者，您可以简单地将选项作为数组（而不是子项）传递，如下所示：

<SelectComponent onChange={usersFunction} options={['value 1','value 2', 'value 3']}>

动态构建选项组件。

来自official page（反应中的背景）：

我们喜欢简单地传递这些物品阵列

Answer 2

你可以做点什么，

import React from 'react'
import ReactDOM from 'react-dom'

class OptionComponent extends React.Component{

    constructor(props) {
        super(props);
    }

    handleClick(){
        this.props.handler(this.props.index);
    }

    render() {
        return (
            <div className={this.props.isChecked ? "optionbtn selected" : "optionbtn"} onClick={this.handleClick.bind(this)} data-value={this.props.value}>
                <label>{this.props.text}</label>
            </div>
        );
    }
}

class SelectComponent extends React.Component{

    constructor() {
        super();
        this.state = {
          selectedIndex: null,
          selectedValue: null,
          options: ["Option 0","Option 1","Option 2","Option 3"]
        };
    }

    toggleRadioBtn(index){
        if(index == this.state.selectedIndex)
            return;

        this.setState({
          selectedIndex: index,
          selectedValue: this.state.options[index],
          options: this.state.options
        });
        this.props.onChange.call(this.state.options[index]);
    }

    render() {

        const { options } = this.state;

        const allOptions = options.map((option, i) => {
            return <OptionComponent key={i} isChecked={(this.state.selectedIndex == i)} text={option} value={option} index={i} handler={this.toggleRadioBtn.bind(this)} />
        });

        return (
            <div data-value={this.state.selectedValue}>{allOptions}</div>
        );
    }
}

var app = document.getElementById('app');

ReactDOM.render(<SelectComponent onChange={usersFunction}/>, app);

Answer 3

通过上下文提供方法。在子组件中需要该方法并调用它。 https://facebook.github.io/react/docs/context.html

Redux基于这一原则。

如何在React中调用parent方法而不通过它来传递道具

3 个答案: