繁体   English   中英

我有两个组件,我想通过第一个组件中的功能将属性更改为第二个组件

[英]I have two components and I want to change property into the second component by function in first component

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

使用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 >
        );
    }

在Ask类中编写一个自定义事件处理函数,以调用handleClickthis.props.handleAddAsk然后将该处理函数绑定到onClick事件。 或在handleClick内调用this.props.handleAddAsk函数,并将handleClick分配给onClick事件。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM