Question

我试图在包含两个单选按钮的DRF-React应用中创建一个简单的SignUp表单，但是我在序列化程序中接收到的数据对于这两个单选按钮始终为

Serializers.py

class UserSerializerWithToken(serializers.ModelSerializer):
    token = serializers.SerializerMethodField()
    password = serializers.CharField(write_only=True)
    # remember_me = serializers.BooleanField()


    def get_token (self, obj):
        jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
        jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER

        payload = jwt_payload_handler(obj)
        token = jwt_encode_handler(payload)
        return token

    def create (self, validated_data):
        password = validated_data.pop('password', None)  
        instance = self.Meta.model(**validated_data)

        if password is not None:
            instance.set_password(password)
        instance.save()
        return instance

    class Meta:
        model = User
        fields = ('token', 'username', 'password','is_teacher', 'is_supplier')

Serializers.data

{'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoyNiwidXNlcm5hbWUiOiI4OTg5IiwiZXhwIjoxNTY0NjUyMTU4LCJlbWFpbCI6ZmFsc2V9.LoqDM31Zh95y0llUqFgeM9n7VC27gYDTXeSjVukFJdw', 
'username':'8989', 

'is_teacher': True, 'is_supplier': True}

SignupForm.js

    class SignupForm extends React.Component {
  state = {
    username: '',
    password: '',
    type: '',
  };

  handle_change = e => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState(prevstate => {
      const newState = { ...prevstate };
      newState[name] = value;
      console.log(newState);
      return newState;

    });
  };

  render() {
    return (
      <form onSubmit={e => this.props.handle_signup(e, this.state)}>
        <h4>Sign Up</h4>
        <label htmlFor="username">Username</label>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handle_change}
        />
        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handle_change}
        />
        <label htmlFor="type">User type</label>
        <input
          type="radio"
          name="is_teacher"             #Change 1
          value="1"
          // checked={this.state.type == "1"}
          onChange={this.handle_change}
        />Shipper
        <input
          type="radio"
          name="is_supplier"                       #Change 2
          value="1"
          // checked={this.state.type == "1"}
          onChange={this.handle_change}
        />Supplier
        <input type="submit" />
      </form>
    );
  }
}

export default SignupForm;

SignupForm.propTypes = {
  handle_signup: PropTypes.func.isRequired
};

Views.py

@api_view(['GET'])
def current_user (request):

    serializer = UserSerializer(request.user)
    return Response(serializer.data)


class UserList(APIView):

    permission_classes = (permissions.AllowAny,)

    def post (self, request, format=None):
        self.http_method_names.append("GET")

        serializer = UserSerializerWithToken(data=request.data)


        if serializer.is_valid():
            serializer.save()
            print("serializer data is", serializer.data)
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

我做错了什么？单击单选按钮时，我不应该在seriailizer.data中收到1吗？

修改现在，我可以保存单选按钮的响应，但是可以将两个按钮都标记为错误，该如何限制呢？

Answer 1

const value = e.target.value;应该为const value = e.target.checked，以进行广播输入。

反应中的单选按钮不响应

1 个答案: