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

但是我觉得这个解决方案很麻烦。
而不是使用状态，你可以使用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>
    );
}

Answer 2

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

Answer 3

＆＃13;

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

＆＃13;

React收集表单属性并提交

3 个答案: