React父子组件传值

/**
 * @author Clearlove
 * @aim 示例父子组件传值 - 父组件
 * @date 2021-04-08
 * @implements class extend React.Component
 */
import React from 'react'
import Children from './children'
import '../common.css'
class Father extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props)
        this.currInput = React.createRef()
        this.state = {
            list: []
        }
    }
    render() {
        return (
            <div className="f-card">
                <div className="f-content">
                    <input className="f-input" ref={this.currInput}></input>
                    <button className="f-btn" onClick={() => this.addItem()}>添加</button>
                </div>
                <div className="f-child">
                    <Children deleteCurrItem={() => this.deletedItem()} content={this.state.list} />
                </div>
            </div>
        )
    }
    /**
     * @function addItem 点击新加一个项到list中
     */
    addItem = () => {
        let tempArr = this.state.list
        if (this.currInput.current.value && this.currInput.current.value.length < 10) {
            if (tempArr.includes(this.currInput.current.value)) {
                alert("请不要输入重复元素！！！")
            } else {
                if (tempArr.length > 9) {
                    alert("最多输入十条数据！！！")
                    return false
                } else {
                    tempArr.push(this.currInput.current.value)
                    this.setState({
                        list: tempArr
                    })
                }
            }
        } else {
            alert("请输入合适的内容进行添加！！！")
        }
    }
    /**
     * @function deletedItem 根据下标进行list数组的删除
     * @param arg 数组的下标
     */
    deletedItem = (arg) => {
        let temparr = this.state.list
        temparr.splice(arg, 1)
        this.setState({
            list: temparr
        }, () => {
            console.log(this.state.list);
        })
    }
}
export default Father

/**
 * @author Clearlove
 * @aim 示例父子组件传值 - 子组件
 * @date 2021-04-08
 * @implements class extend React.Component
 */
import React from 'react'
import '../common.css'
class Children extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <ul className="item-ul">
                    {this.props.content.length > 0 ? this.props.content.map((item, index) => <li title={"删除" + item} onClick={() => this.deleteCurrItem(index)} key={index}>{item}</li>) : <h2>No Data</h2>}
                </ul>
            </div>
        )
    }
    /**
     * @function deleteCurrItem 根据下标进行删除
     * @param {*} arg 
     */
    deleteCurrItem(arg) {
        //调用父组件中的函数进行执行删除的操作
        this.props.deleteCurrItem(arg)
    }
}
export default Children

import Father from './components/jsx/father.jsx'
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Father />
      </header>
    </div>
  );
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

.f-card {
    width: 600px;
    height: 600px;
    background-color: blanchedalmond;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 10px;
    padding-top: 20px;
}

.f-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.f-child {
    width: 600px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30px;
}

.item-ul {
    font-size: larger;
    color: chocolate;
}

.item-ul li {
    list-style: none;
}

.item-ul li:hover {
    color: black;
    cursor: move;
    font-size: 30px;
}

.f-btn {
    border: none;
    width: 120px;
    height: 40px;
    background-color: cadetblue;
    box-shadow: black;
    border-radius: 10px;
    font-size: 20px;
    color: aliceblue;
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    outline: none;
    cursor: pointer;
}

.f-input {
    width: 240px;
    height: 40px;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    padding-left: 10px;
    color: dimgrey;
    outline: none;
}