javascript - 我有两个组件，我想通过第一个组件中的函数将属性更改为第二个组件

Question

我需要使用其他组件的方法来获取数据，并且我还需要使用同一按钮上的功能来清除他的内容。也许有人有其他想法来做同样的事情。

通过handleAddAsk函数我得到了我需要的数据，这个函数是由ask__btn类按钮触发的，但我也想在这个按钮上使用handleClick函数来在发送数据后清除输入

//I deleted redundant code

import React, { Component } from 'react';
import Ask from './Ask';
import './App.css';

class App extends Component {
  state = {
    asks: [],
  }

  handleAddAsk(index, name, data) {
    let asks = data[index].asks.push({
      id: data[index].asks.length,
      name: name,
    })
    this.setState({ asks });
  }

}

//second class

class Ask extends Component {
    state = {
        input: '',
    }

    handleChange = e => {
        const name = e.target.name
        const value = e.target.value
        this.setState({
            [name]: value,
        })
    }
    handleClick = () => {
        this.setState({
            input: '',
        })
    }
    render() {
        return (
            <div className="ask">
                <label className="ask__label">{this.props.name}
                    <input className="ask__input" name="input" value={this.state.input} onChange={this.handleChange} type="text" placeholder="treść pytania ..." />
                </label>
                <button className="ask__btn" onClick={this.props.handleAddAsk.bind(this, this.props.index, this.state.input, this.props.data)}>Dodaj pytanie</button>
            </div >
        );
    }

Answer 1

在 Ask 类中编写自定义事件处理函数来调用 handleClick 和 this.props.handleAddAsk，然后将该处理函数绑定(bind)到 onClick 事件。或者在 handleClick 中调用 this.props.handleAddAsk 函数，并将 handleClick 分配给 onClick 事件。