通过输入检索信息时出错

Question

我使用 semantic-ui-react 编写了我的代码并对 redux 做出反应，创建了一个组合 UI 并且当我们将输入传递给该字段时它显示这样的错误

"TypeError: Cannot read property 'value' of undefined"

我正在尝试使用 semantic-ui-react 和 react-redux

import React, { Component } from 'react'
import { Button, Header, Icon, Modal, Form} from 'semantic-ui-react';
import { connect } from "react-redux";

class Compose extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    console.log("button triggered")
    const From = this.getFrom.value;
    const To =  this.getTo.value;
    const Subject = this.getSubject.value;
    const outboxMessage = {
      From,
      To,
      Subject
    }
   console.log(outboxMessage)
  }


    render() {
      return (
        <Modal trigger={<Button animated inverted color='blue'>
          <Button.Content visible>Compose</Button.Content>
          <Button.Content hidden>
            <Icon name='plus'/>
          </Button.Content>
        </Button>} closeIcon>

           <Modal.Content>
      <Form onSubmit={this.handleSubmit}>
      <Form.Input fluid label='From' type="text" ref={(input)=>this.getFrom = input} />
      <Form.Input fluid label='To' type="text" ref={(input)=>this.getTo = input}/>
      <Form.Input fluid label='Cc' type="text" ref={(input)=>this.getTo = input}/>
      <Form.Input fluid label='Bcc' type="text"  ref={(input)=>this.getTo = input}/>
      <Form.Input fluid label='Subject' type='text'ref={(input)=>this.getSubject = input}/>
      </Form>
<Button animated inverted color='blue'   id='sendBtn'>
  <Button.Content visible>Send</Button.Content>
        <Button.Content hidden>
          <Icon name='envelope'/>
        </Button.Content>
      </Button>
      <Button animated inverted color='red'><Button.Content visible>Discard</Button.Content>
        <Button.Content hidden>
          <Icon name='remove circle'/>
        </Button.Content>
      </Button>

                    </Modal.Content>
      </Modal>
    );
  }
}
export default Compose;

"In redux folder, reducer file:"

import actions from './actions';

const initialState = {

outboxMessage: []

}

const emailReducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.OUTBOX_MESSAGE:
      return {
        ...state,
        outboxMessage: state.outboxMessage.concat([action.outboxMessage])
      };
      default:
        return state;
    }
  }


  export default emailReducer;

"In Index.js, mofidied in this way:"

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';


import emailReducer from './components/redux/reducer';
const store = createStore(emailReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));

我收到这样的错误：

Compose.handleSubmit [as onSubmit]
F:/compose/src/components/Email/Compose.js:14
  11 | 
  12 | handleSubmit = (e) => {
  13 |   e.preventDefault();
> 14 |   const to = this.getTo.value;
     | ^  15 |   const cc =  this.getCc.value;
  16 |   const bcc = this.getBcc.value;
  17 |   const subject = this.getSubject.value;

Answer 1

您可以使用 state，这也是一种更简洁的方法。

维护所有输入的状态。

state = {
  from: "",
  to: "",
  cc: "",
  bcc: "",
  subject: ""
}

现在你可以 Controlled Component.

我们需要 name、value 和 onChange 属性 input。

<Form onSubmit={this.handleSubmit}>
      <Form.Input fluid label='From' type="text"  name="from" value={this.state.from} onChange={this.changeHandler}/>
      <Form.Input fluid label='To' type="text" name="to" value={this.state.to} onChange={this.changeHandler}/>
      <Form.Input fluid label='Cc' type="text" name="cc" value={this.state.cc} onChange={this.changeHandler}/>
      <Form.Input fluid label='Bcc' type="text"  name="bcc" value={this.state.bcc} onChange={this.changeHandler}/>
      <Form.Input fluid label='Subject' type='text' name="subject" value={this.state.subject} onChange={this.changeHandler}/>
</Form>

现在您的更改处理程序将是，

changeHandler = (e) => {
   this.setState({
      [e.target.name] : e.target.value
   })
}

最后你可以使用来自状态的值，

handleSubmit = (e) => {
    e.preventDefault();
    console.log("button triggered")

    //Get the values from state
    const From = this.state.from;
    const To =  this.state.to;
    const Subject = this.state.subject;

    const outboxMessage = {
      From,
      To,
      Subject
    }
   console.log(outboxMessage)
}

通过输入检索信息时出错

getting errors in retrieving information through inputs

reactjs

react-redux

semantic-ui-react