Question

按钮组件（子级）

export default class Button extends React.Component {
  render() {
    var handleToUpdate = this.props.handleToUpdate;
    return (
      <button onClick={() => handleToUpdate(this.id)}>
        {this.props.title}
      </button>
    );
  }
}

索引（父级）
作为回报

<Button title={title1} handleToUpdate={handleToUpdate.bind(this)} />
<Button title={title2} handleToUpdate={handleToUpdate1.bind(this)} />
<Button title={title3} />
<Button title={title4} />

渲染

const title1 = "test1"
const title2 = "test2"
const title3 = "test3"
const title4 = "test4"
var handleToUpdate = this.handleToUpdate;
var handleToUpdate1 = this.handleToUpdate1;

功能

  handleToUpdate() {
  this.setState({})
  }

  handleToUpdate1() {
  this.setState({})
  }

var handleToUpdate = this.handleToUpdate.bind(this);
var handleToUpdate1 = this.handleToUpdate1.bind(this);

我的代码中没有问题，但是我认为使用该函数的方式不是一种好习惯。

我在这里所做的是我制作了按钮组件（子代），并在父代（索引）中调用了四次。我创建了onClick道具来调用函数，然后设置状态。

有没有其他方法可以用4个setState创建一个函数并根据所单击的按钮ID调用状态。

使其更加清晰

单击按钮1 =>调用单功能=> setstate1

单击按钮2 =>校准单功能=>设置状态2 ...

Answer 1

如果要将id传递给Button组件，这是另一种方法。

const buttons = [
  { id: 1, title: "test1" },
  { id: 2, title: "test2" },
  { id: 3, title: "test3" },
];

class App extends React.Component {
  state = {
    clicked: "",
  };

  onUpdate = ( id ) => {
    this.setState( { clicked: id } );
  };

  render() {
    console.log( this.state );
    return (
      <div>
        {buttons.map( button => (
          <Button
            key={button.id}
            button={button}
            onUpdate={this.onUpdate}
          />
        ) )}
      </div>
    );
  }
}

const Button = ( props ) => {
  const { button, onUpdate } = props;
  const handleUpdate = () => onUpdate( button.id );
  return <button onClick={handleUpdate}>{button.title}</button>;
};

ReactDOM.render( <App />, document.getElementById( "root" ) );

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

Answer 2

我会做这样的事情：

render(){
    const titles = ['title1', 'title2', 'title3', 'title4'];

  return(
    {
     titles.map((title, i)=>(
     <Button title={title} key={i} 
             handleToUpdate={()=>this.handleToUpdate(i)} />
               ))
    }
}

在您的handleToUpdate函数/方法中，然后应使用参数i确定要执行的操作。您还可以使用类似(e)=>this.handleToUpdate(e)的参数，然后使用标题命名按钮并通过e.target访问名称，如下所示：

handleToUpdate(e){
   const {name} = e.target;
   this.setState({[name]: true});
}

您可以将设置状态中的true替换为您想要的任何值，但是如果您要执行的操作具有单个可能的结果，则最好使用布尔值，即始终以与您在演示文稿中显示的相同方式设置状态问题。

要在按钮的位置不同的情况下直接通过id传递函数，请执行以下操作：

<Button title={title1} handleToUpdate={()=>this.handleToUpdate(1)} />

其中1是一个索引，其中包含要插入的任何数字，或要在switch语句中使用的任何键。

在“按钮”组件中，将onClick更改为：

<button onClick={this.props.handleToUpdate}> {this.props.title} </button>

基本上，就像我在上面的map函数中一样，直接将参数绑定到函数。

使用此解决方案，您可以像Ashley Brown的答案一样执行switch语句。

Answer 3

您可以使用开关根据传入的id来确定单击了哪个按钮...或者，如果您没有传入id，则可以通过该事件已经。如果您还没有的话，请务必设置道具。

export default class Button extends React.Component {
  render() {
    var handleToUpdate = this.props.handleToUpdate;
    return (
      <button onClick={() => handleToUpdate(this.id)}> // <- this id you passed in
        {this.props.title}
      </button>
    );
  }
}


<Button id={1} title={title1} handleToUpdate={handleToUpdate.bind(this)} />
<Button id={2} title={title2} handleToUpdate={handleToUpdate.bind(this)} />

handleToUpdate(id) { // <-- id passed in
  switch(id) {
   case 1: // if id === 1
    //setState({})
   break;

   case 2: // if id === 2
    //setState({})
   break;
   // etc
 } 
}

使用多个setstate反应js单个函数

3 个答案: