javascript - React 收集表单属性并提交

Question

我是 React 和 Redux 的新手，因此，对于这个虚拟问题感到抱歉。

我有一个组件:

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

此外，我有一个操作位于不同的文件，我想在单击按钮时调用它。

export function addReminder(reminder) { ... }

因此，我想创建一个具有名称和描述属性的提醒对象并调用一个操作。另外，我不想创建 <form> ，只是一个简单的 div。你能解释一下我该怎么做吗？

Answer 1

如果你不想使用 form 元素，你可以将输入值存储在 state 中，然后在 button 点击时，将状态传递给addReminder 功能:

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>
        )
    }
}

但我认为这个解决方案很麻烦。
你可以使用 form 元素，并在 onSubmit 回调中，序列化它的值，而不是使用状态反对并将它们传递给 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>
    );
}