通过反应组件使用值

Question

我是 React 的新手，一直在努力应对新的挑战。 请写下您的意见并帮助我摆脱这一挑战。 我需要获取输入值并将其附加到列表区域中。 基本上获取 state.inputValue 并将其附加到 listArea 的 ul 中。 这是 InputTask 组件。

import React from 'react';

class InputTask extends React.Component {
    state = { inputValue: ''}

    onInputSubmit = (e) => {
        this.setState({inputValue: e.target.value})
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log('A name was submitted: ' + this.state.inputValue);
    }



    render() {
        return (
            <form className="ui input" onSubmit={this.handleSubmit} style={{marginRight:10}}>
                <input type="text" value={ this.state.inputValue } onChange={this.onInputSubmit}/>
            </form>
        )
    }
}


export default InputTask;

这是 listArea 组件。

import React from 'react';
class ListArea extends React.Component{
    render() {
        const style={
            backgroundColor: "#f5d556",
            height: "400px",
            padding: "40px",
            borderRadius: "20px"
        };

        const listStyle = {
            backgroundColor: "green",
            color: "white",
            listStyle: "none",
            textAlign: "left",
            padding: "5px",
            marginBottom: "10px",
            borderRadius: "5px"
        }

        const iconStyle = {
            float: "right"
        }

        const labelStyle = {
            color: "white"
        }

        return(
            <div className="ui form" style={{marginBottom:10}}>
                <div className="field">
                    <div style={style}>
                        <ul style={{paddingLeft: 0}}>
                            <li style={listStyle}>
                                <div className="ui checkbox">
                                  <input type="checkbox" name="example"/>
                                  <label style={labelStyle}> hello there!</label>
                                </div>
                                <i className="white trash icon" style={iconStyle}></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

export default ListArea;

这是应用程序组件

import React from 'react';
import ReactDOM from 'react-dom';
import InputTask from "./components/inputTask";
import ListArea from "./components/listArea";


class App extends React.Component {
    render() {
        return (
            <div className="ui container" style={{textAlign:'center'}}>
                <h1>Tasks</h1>
                <ListArea />
                <InputTask />
             </div>
        );
    }
}

ReactDOM.render(<App />,document.getElementById('root'));

Answer 1

在 handleSubmit 处的 InputTask 组件中，使用this.props.InputSelected(this.state.inputValue); 我将选定的输入发回给它的父级（App.js）

import React from "react";

class InputTask extends React.Component {
  state = { inputValue: "" };

  onInputSubmit = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log("A name was submitted: " + this.state.inputValue);
    this.props.InputSelected(this.state.inputValue);
    this.setState({ inputValue: "" });
  };

  render() {
    return (
      <form
        className="ui input"
        onSubmit={this.handleSubmit}
        style={{ marginRight: 10 }}
      >
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.onInputSubmit}
        />
      </form>
    );
  }
}

export default InputTask;

在 App 组件中，我使用handleInputSelected获得了选定的值并将其添加到列表中以发送到 ListArea 组件

import React from "react";
import InputTask from "./components/inputTask";
import ListArea from "./components/listArea";

class App extends React.Component {
  state = { list: [] };
  handleInputSelected = (input) => {
    const { list } = { ...this.state };
    list.push(input);
    this.setState(list);
  };
  render() {
    return (
      <div className="ui container" style={{ textAlign: "center" }}>
        <h1>Tasks</h1>
        <ListArea list={this.state.list} />
        <InputTask InputSelected={(input) => this.handleInputSelected(input)} />
      </div>
    );
  }
}
export default App;

最后在列表中带有地图的 ListArea 组件中，我只是将 li 元素附加到 ul。

import React from "react";
class ListArea extends React.Component {
  render() {
    console.log("data: ", this.props.data);
    const style = {
      backgroundColor: "#f5d556",
      height: "400px",
      padding: "40px",
      borderRadius: "20px",
      overflow: "scroll"
    };

    const listStyle = {
      backgroundColor: "green",
      color: "white",
      listStyle: "none",
      textAlign: "left",
      padding: "5px",
      marginBottom: "10px",
      borderRadius: "5px"
    };

    const iconStyle = {
      float: "right"
    };

    const labelStyle = {
      color: "white"
    };
    console.log(this.props.data);

    return (
      <div className="ui form" style={{ marginBottom: 10 }}>
        <div className="field">
          <div style={style}>
            <ul style={{ paddingLeft: 0 }}>
              <li style={listStyle}>
                <div className="ui checkbox">
                  <input type="checkbox" name="example" />
                  <label style={labelStyle}> hello there!</label>
                </div>
                <i className="white trash icon" style={iconStyle}></i>
              </li>
              {this.props.list.map((m) => (
                <li style={listStyle}>
                  <div className="ui checkbox">
                    <input type="checkbox" name="example" />
                    <label style={labelStyle}> {m}</label>
                  </div>
                  <i className="white trash icon" style={iconStyle}></i>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default ListArea;