CODEWITHSUNDEEP
javascriptreactjsredux
Bob
Bob

Reputation: 10775

React collect form properties and submit

I am new to React and Redux, hence, sorry for the dummy question.

I have a component:

export default class AddReminder extends Component {
    render() {
        return (
            <div>
                Name: <input name="name" />
                Description: <input name="description" />
                <button>
                    Add reminder
                </button>
            </div>
        )
    }
}

Also, I have an action located in different file what I want to call on button click.

export function addReminder(reminder) { ... }

So, I would like to create a reminder object with name and description properties and call an action. Also, I do not want to create a <form>, just a simple div. Can you please explain how can I do that?

Upvotes: 1

Views: 145

Answers (3)

link0047
link0047

Reputation: 103

class AddReminder extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e) {
    const parent = e.target.parentNode.children;
    const { name, description } = parent;
    dispatch(actionName({name.value, description.value}));
  }
  
  render() {
    return (
      <div>
        Name: <input name="name" />
        Description: <input name="description" />
        <button onClick={this.handleClick}>
          Add reminder
        </button>
      </div>
    );
  }
}

Upvotes: 1

1ven
1ven

Reputation: 7016

If you don't want to use form element, you can store inputs values in state and on button click, pass state to addReminder func:

export default class AddReminder extends Component {
    constructor() {
        this.state = {
            name: '',
            description: ''
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleNameChange(e) {
        this.setState({
            name: e.target.value
        });
    }

    handleDescChange(e) {
        this.setState({
            description: e.target.value
        });
    }

    handleSubmit() {
        addReminder(this.state);
    }

    render() {
        return (
            <div>
                Name: <input name="name" value={this.state.name} onChange={handleNameChange} />
                Description: <input name="description" value={this.state.description} onChange={handleDescChange} />
                <button onClick={this.handleSubmit}>
                    Add reminder
                </button>
            </div>
        )
    }
}

But this solution is cumbersome, I think.
Instead of using state, you can use form element, and inside of onSubmit callback, serialize it values to object and pass them to addReminder func:

// You should install `form-serialize` package from npm first.
import serialize from 'form-serialize';

// Note, we are using functional stateless component instead of class, because we don't need state.
function AddReminder() {
    let form;
    function handleSubmit(e) {
        // Preventing default form behavior.
        e.preventDefault();

        // serializing form data to object
        const data = serialize(form, { hash: true });

        addReminder(data);
    }

    // Assigning form node to form variable
    return (
        <form ref={node => form = node} onSubmit={handleSubmit}>
            Name: <input name="name" />
            Description: <input name="description" />
            <button type="submit">
                Add reminder
            </button>
        </form>
    );
}

Upvotes: 2

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

    import {addReminder} from './addReminder';
export default class AddReminder extends Component {
        render() {
            addReminder() {
               //call your action or do whatever
               return {
                   name: this.refs.name.value,
                   description: this.refs.description.value
               }
           }
            return (
                <div>
                    Name: <input name="name" />
                    Description: <input name="description" />
                    <button onClick={addReminder.bind(this}>
                        Add reminder
                    </button>
                </div>
            )
        }
    }

Upvotes: 1

Related Questions